将json中的数据加载到table和ul中

最新推荐文章于 2025-04-30 18:09:15 发布

tytammy

最新推荐文章于 2025-04-30 18:09:15 发布

阅读量7.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： json ES6

本文链接：https://blog.youkuaiyun.com/turingty/article/details/52401783

web前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何利用JavaScript（特别是ES6特性）将JSON数据转换并加载到HTML表格和无序列表中，详细展示了HTML结构、JS处理逻辑和JSON数据格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo</title>
    <style type="text/css">
    html,body,nav,ul,table{margin: 0; padding: 0;}
    .options{ display: inline-block; height: 30px; width: 70px; background: #ddd; text-align: center; line-height: 30px;}
    a.options{ color: #000; text-decoration: none; }
    .nav-box{ background: #39F; }
    #list li{ height: 28px; width: 200px; border: 1px solid #ddd; }

    #tab{ display: none; }

    </style>
</head>
<body>

    <nav id="nav">
        <a href="#" id="nav-a" class="options nav-box">A</a>
        <a href="#" id="nav-b" class="options">B</a>
    </nav>

    <ul id="list">
    </ul>

    <table id="tab" border="1">
    </table>

</body>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</html>

JS代码

$("#nav-a").click(function() {
    //隐藏
    $("#tab").hide();
    //显示
    $("#list").show();

    $("#nav-a").addClass('nav-box');
    $("#nav-b").removeClass('nav-box');

});

$("#nav-b").click(function() {
    //隐藏
    $("#list").hide();
    //显示
    $("#tab").show();

    $("#nav-b").addClass('nav-box');
    $("#nav-a").removeClass('nav-box');
});
/**
*  非ES6新特性
*/
// $("#nav-a").on("click", (function() {

//  $.ajax({
//      url: 'data.json',
//      type: 'get',
//      dataType: 'json',
//      error: function(error) {
//          alert(error);
//      },
//      success: function(data) {
//          $("#list").html("");
//          for (var i = 0; i < data.length; i++) {
//              //动态拼接
//              var temphtml = $("#list").html() + '<li class="list">name:' + data[i].name + ',age:' + data[i].age + "</li>";
//              $("#list").html(temphtml);
//          }
//      }
//  });
// })());

/**
*  使用ES6新特性
*/
$("#nav-a").on("click", (() => {
    $.ajax({
        url: 'data.json',
        type: 'get',
        dataType: 'json',
        error: error => alert(error),
        success: data => {
            $("#list").html("");

            let temphtml = "";
            data.map(item => {
                temphtml += `<li class="list">name:${item.name},age:${item.age}</li>`
            })

            $("#list").html(temphtml);
        }
    });
})())


$("#nav-b").on("click", () => {

    $.ajax({
        url: 'data.json',
        type: 'get',
        dataType: 'json',
        error: error => alert(error),
        success: data => {
            $("#tab").html("");

            let namehtml = "",
                agehtml = "",
                titlehtml = "",
                alltitle = "",
                allhtml = "";
            for (var key in data[0]) {
                titlehtml += `<th>${key}</th>`
            }
            alltitle = `<tr>${titlehtml}</tr>`
            data.map(item => {
                //动态拼接
                namehtml = `<td class="name">${item.name}</td>`
                agehtml = `<td class="age">${item.age}</td>`
                allhtml += `<tr>${namehtml}${agehtml}</tr>`
            })
            $("#tab").html(alltitle + allhtml);
        }
    });
});

JSON文件

 [{
    "name": "tammy",
    "age": 21
 }, {
    "name": "job",
    "age": 22
 }, {
    "name": "tom",
    "age": 19
 }]