javascript - jQuery中each循环json正确的该怎么写？

问题描述

问 题

需求：根据后台传来的json数据循环出一个多级导航菜单
问题：
1、循环时二级和三级子菜单li标签外层包裹ul标签怎么写？
2、我这样写是否正确？有没有更好的写法？应该怎样写？

ps：本人小白，还望大神耐心指点。多谢

json数据大概如下：

    [
      { "id":"1" , "name":"类型一","type":"a",
        "cc":[
          { "id":"1-1" , "name":"二级1.1","type":"bb" },
          { "id":"1-2" , "name":"二级1.2","type":"cc",
            "cc":[
              { "id":"1-1-1" , "name":"三级1.1.1","type":"aaa" },
              { "id":"1-1-2" , "name":"三级1.1.2","type":"bbb" },
              { "id":"1-1-3" , "name":"三级1.1.3","type":"ccc" },
              { "id":"1-1-4" , "name":"三级1.1.4","type":"ddd" }
            ]},
          { "id":"1-3" , "name":"二级1.3","type":"dd" },
          { "id":"1-4" , "name":"二级1.4","type":"ee" }
        ]
      },
      { "id":"2" , "name":"类型二","type":"b",
        "cc":[
          { "id":"2-1" , "name":"二级2.1","type":"ff" },
          { "id":"2-2" , "name":"二级2.2","type":"gg",
            "cc":[
              { "id":"2-2-1" , "name":"三级2.2.1","type":"fff" },
              { "id":"2-2-2" , "name":"三级2.2.2","type":"ggg" },
              { "id":"2-2-3" , "name":"三级2.2.3","type":"hhh" },
              { "id":"2-2-4" , "name":"三级2.2.4","type":"iii" }
            ]},
          { "id":"1-3" , "name":"二级2.3","type":"hh" },
          { "id":"1-4" , "name":"二级2.4","type":"ii" }
        ]},
      { "id":"3" , "name":"类型三","type":"c" },
      { "id":"4" , "name":"类型四","type":"d" }
   ]

jquery代码如下：

 $(function () {

    $.ajax({
        type: "post",
        url: "./json/test.json",
        success: function (data) {
            $.each(data, function(index, content){
                var showList = $("<li class='nav" + content.id + "'> "+ content.name +" </li>");
                $.each(data[index].cc,function (i,k) {
                    var showC = $("<li class='list" + k.id + "'> "+ k.name +" </li>");
                    $.each(data[index].cc[i].cc,function (m,n) {
                        var showCC = $("<li class='list" + n.id + "'> "+ n.name +" </li>");
                        showC.append(showCC)
                    });
                    showList.append(showC)
                });
                $(".nav-list").append(showList);
            });
        }
    });

});
    

HTML 代码如下：

<ul class="nav-list"></ul>

解决方案

<script type="text/javascript">
    $.ajax({
        type: "get",
        url: "/media/json/test.json",
        success: function (data) {
            var list = "";
            $.each(data, function (index, item) {
                list += "<li>" + item.name;
                var data2 = item.cc;
                if (data2) {
                    $.each(data2, function (index2, item2) {
                        if (index2 === 0) {
                            list += "<ul>";
                        }
                        list += "<li>" + item2.name;
                        var data3 = item2.cc;
                        if(data3) {
                            $.each(data3, function (index3, item3) {
                                if (index3 === 0) {
                                    list += "<ul>";
                                }
                                list += "<li>" + item3.name + "</li>";
                                if (index3 + 1 === data3.length) {
                                    list += "</ul>";
                                }
                            });
                        }
                        list += "</li>";
                        if (index2 + 1 === data2.length) {
                            list += "</ul>";
                        }
                    });
                }
                list += "</li>";
                console.log(list);
            });
            console.log(list);
            $("#nav-list").append(list);
        }
    });
</script>

这篇关于javascript - jQuery中each循环json正确的该怎么写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！