Question

我想在树视图结构中迭代JSON数据。对于第一级，我只能迭代json值，而第二级第三级无法迭代父数组中下一级数据的数据。

在JSON中声明我的键/值对的方式也可能是一个问题，因为我使用相同的＆＃39; 标题＆＃39;关键字。

JSON

{  
           "category":[        
               {  
                 "title":"Customer Satisfaction", // first levl
                 "items":[  
                    {  
                       "title":"Bulletins", // second level
                       "id":"nnanet:category/customer-satisfaction/bulletins"
                    },
                    {  
                       "title":"Consumer Affairs", // second level
                       "id":"nnanet:category/customer-satisfaction/consumer-affairs"
                    },
                    {  
                       "title":"Loyalty",
                       "id":"nnanet:category/customer-satisfaction/loyalty"
                    },
                    {  
                       "title":"Reference Guide",
                       "id":"nnanet:category/customer-satisfaction/reference-guide"
                    },
                    {  
                       "title":"TOI",
                       "id":"nnanet:category/customer-satisfaction/toi"
                    }
                 ]
              },
              {  
                 "title":"Accessories",
                 "id":"nnanet:category/accessories"
              },
              {  
                 "title":"Certified Pre-Owned",
                 "id":"nnanet:category/certified-pre-owned"
              }

           ]
        }

HTML

<div id="all-id">
    <ul class="tree"></ul> // appending html code and json code inside this //
</div>

的JavaScript

$.ajax({
    url: '../js/internal/json/documentListing.json',
    datatype: 'json',
    type: 'get',
    cache: 'false',
    success: function(data) {
        $.each(data.category, function(index, value) {
            console.log("Title :" + value.title + "," + "ID :" + value.id);
            var treeViewdata = "<li> <a href='#'>" + items.title + "</a> <ul> <li> <a href='#'>" +
                value.title + "</a> </ul> </li> </li>";
            $(treeViewdata).appendTo(".tree");
        });
    }
});

value.title是显示的第一级数据，items.title是要迭代的第二级数据。在这里，我只是遇到问题而且情况正在失败。

Answer 1

我在评论中使用了我提供给您的链接：https://stackoverflow.com/a/13347251/4045532。

关键是使用这种递归方法：

function json2html(json) {
var i, ret = document.createElement('ul'), li;
for( i in json) {
    li = ret.appendChild(document.createElement('li'));
    li.appendChild(document.createTextNode(i+": "));
    if( typeof json[i] === "object") li.appendChild(json2html(json[i]));
    else li.firstChild.nodeValue += json[i];
}
return ret;

}

输出可以在这里看到：https://jsfiddle.net/xkL03obg/

这只是你如何实现这一目标的一个例子。希望它有所帮助

如何在树视图结构节点中使用jquery迭代html中的json数据

JSON

HTML

的JavaScript

1 个答案: