jQuery JSON 循环遍历嵌套对象答案

【问题标题】：jQuery JSON looping through nested objectsjQuery JSON 循环遍历嵌套对象
【发布时间】：2011-12-18 17:47:07
【问题描述】：

我目前有这个：

    $.getJSON('test.json', function(data) {
      var items = [];

      $.each(data, function(key, val) {
        items.push('<li id="' + key + '">' + val + '</li>');
      });

      $('<ul/>', {
        'class': 'my-new-list',
        html: items.join('')
      }).appendTo('body');
    });

test.json 看起来像这样：

{"key1":{"key11":"value11","key12":"value12"},"key2":"value2","key3":"value3"}

我明白了：

[object Object]
value2
value3

我怎样才能改变它，让它循环遍历所有嵌套项，而不管我有多少嵌套值？

所以对于上面的例子我会得到

value1
    value11
    value12
value2
value3

【问题讨论】：

为什么会显示value1？
@pimvdb 没想到，我的问题是如何让它显示为嵌套的

标签： javascript jquery json

【解决方案1】：

你可以创建一个递归循环函数，但是你会遇到一个问题：当一个属性是一个对象时，因为没有字符串，所以没有文本可以显示。所以，你最终会得到：

- - value11
  - value12
- value2
- value3

因为value2 是为项目#2 显示的字符串，它是为项目#1 显示的对象。

无论如何，这是我编造的：http://jsfiddle.net/uXww2/。

// obj is the object to loop, ul is the ul to append lis to
function loop(obj, ul) {
    $.each(obj, function(key, val) {
        if(val && typeof val === "object") { // object, call recursively
            var ul2 = $("<ul>").appendTo(
                $("<li>").appendTo(ul)
            );

            loop(val, ul2);
        } else {
            $("<li>", {
                id: key
            }).text(val).appendTo(ul);
        }
    });
}

$.getJSON('test.json', function(data) {
  var ul = $("<ul>");

  loop(data, ul);

  ul.addClass("my-new-list").appendTo('body');
});

【讨论】：

谢谢，如果有嵌套值，是否可以将键用作顶部
内容？

@Or W：你必须在 ul2 中给 li 一些文本（关键变量）。

这里不考虑数组，你可能应该写$.isPlainObject(val) || $.isArray(val)

不推荐使用typeof，因为typeof null === "object" 是真的

@Christoph：是的。 OP 只处理字符串（没有数组/null/etc），但我会编辑。

【解决方案2】：

所以，你想要的是一个遍历 json 对象的树视图

您可以使用我自己编写的递归代码，对其进行测试；）

var treestring      = "";
var myid            = "arv";
var json_object     = {your json}; 

var Tree = function (data) {
   this.data = data;
};

//1st step
Tree.renderTree(json_object, myid);

//2st step , this is a function
Tree.renderTree= function (json_object, myid) {
    $.each(json_object, function (key, val) {
        var m = new Tree(val);
        m.render(myid);
    });       
}

//3st step, this a function too
Tree.prototype.render = function (myid) {
    treestring = "<li class='category'> " + this.data.Name;
    //Check if has another arrays inside the current
    if (this.data.SubFolders) {
        treestring += "<ul id=" + this.data.ID + "</ul>";
        $("#" + myid).append(treestring);
        myid = this.data.ID;
        Tree.renderTree(this.data.Sub_Fodlers, myid);
    }
    else {
        treestring += "</li>";
        $("#" + myid).append(treestring);
    }
};


//HTML
<div id="tree"> 
     <ul id="arv"></ul>
</div>

//this.data.{something} 吃了你的 json 对象中定义的字段

享受 ;)

【讨论】：