Github：show_users_JSON
一. 需求
請把這個 JSON 數據用 JQuery 在頁面中構造出來。
var users = [
{"name" : "TimHsu", "sex" : "1", "tel" : "13750066666"},
{"name" : "Dicky", "sex" : "1", "tel" : "13750066666"},
{"name" : "Peter", "sex" : "1", "tel" : "13750066666"},
{"name" : "Alice", "sex" : "1", "tel" : "13750066666"},
{"name" : "Tom", "sex" : "1", "tel" : "13750066666"}
];
二. 代碼
show_users_JSON.html
<!DOCTYPE html>
<html>
<head>
<title>顯示 JSON 數據</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="show_users.css" />
</head>
<body>
<div id="div0"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="show_users.js"></script>
</html>
省略 show_users_JSON.css 😃
show_users_JSON.js
var users = [
{"name" : "TimHsu", "sex" : "1", "tel" : "13750066666"},
{"name" : "Dicky", "sex" : "1", "tel" : "13750066666"},
{"name" : "Peter", "sex" : "1", "tel" : "13750066666"},
{"name" : "Alice", "sex" : "1", "tel" : "13750066666"},
{"name" : "Tom", "sex" : "1", "tel" : "13750066666"}
];
/* JavaScript */
// var list = document.createElement("ol");
// document.getElementById("div0").appendChild(list);
// for(var i = 0; i < users.length; i++) {
// var item = document.createElement("li");
// var itemText = document.createTextNode(users[i].name + " " + users[i].sex + " " + users[i].tel);
// item.appendChild(itemText);
// list.appendChild(item);
// }
/* JQuery */
$(document).ready(function() {
$("div").append("<ol></ol>");
for(var i = 0; i < users.length; i++) {
var li = $("<li></li>").text(users[i].name + " " + users[i].sex + " " + users[i].tel);
$("ol").append(li);
// $("ol").append("<li>" + users[i].name + " " + users[i].sex + " " + users[i].tel + "</li>");
}
});
三. 效果
