数组里面包含数组数据渲染

fighting_sunnyGirl

于 2017-08-23 10:35:08 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/fighting_sunnyGirl/article/details/77502786

js 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用jQuery从JSON文件中获取数据，并将这些数据动态地填充到HTML页面中的方法。具体实现包括利用$.getJSON获取JSON数据，通过for循环遍历数据并构建HTML元素，最终将这些元素追加到指定的DOM节点上。

html部分代码：
<body>
    <div class="zz">
        
    </div>

</body>

$.getJSON('aaa.json', function(data){
    console.log(data);
    var chapter
    for (var i = 0; i < data.chapterList.length; i++) {
       var a ='';
       for ( var j = 0 ; j < data.chapterList[i].videoList.length ; j ++ ){
                           a  += '<li class="">'+
                                      '<em>'+data.chapterList[i].videoList[j].detailName+'</em>'+
                                  '</li>';
        }
        chapter = '<div class="box">'+
            '<div class="period_t">'+
            '<div class="period_num">'+
            data.chapterList[i].chapterName+
            '</div>'+
            '<span></span>'+
            '</div>'+
            '<ul class="period_b clearfix">'+a;
        '</ul>'+
        '</div>';
        $('.zz').append(chapter)
    }

});