JQuery-Demo6：显示 JSON 数据

最新推荐文章于 2023-04-15 09:34:36 发布

xxplz

最新推荐文章于 2023-04-15 09:34:36 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/Aless0/article/details/102827974

版权

JQuery-Demo6：显示 JSON 数据

一. 需求
二. 代码
三. 效果

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>");  
    }
});