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

【问题标题】：how to iterate json data in html using jquery in tree view structure node如何在树视图结构节点中使用jquery在html中迭代json数据
【发布时间】：2016-08-22 12:41:27
【问题描述】：

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

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

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 是要迭代的第二级数据。在这里我只是遇到问题并且条件失败。

【问题讨论】：

这是因为类别数组包含一个标题为“客户满意度”的项目，而该项目包含一个名为项目的集合。所以这些标题中的大部分都嵌套在第一项下
如果我使用单独的关键字它会工作你说的
我想问题是：所有标题（从公告开始）应该是客户满意度标题的子级，还是应该都是一个集合？注意到问题已重新格式化，现在更有意义
这可能会有所帮助：link
未尝试但尚未解决

标签： javascript jquery json jquery-ui

【解决方案1】：

我使用了我在 cmets 中提供给您的链接以及此链接：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/

这只是您如何实现这一目标的一个示例。希望对你有帮助

【讨论】：