jQuery JSON循环遍历嵌套对象

我目前有这个：

$.getJSON('test.json', function(data) { var items = []; $.each(data, function(key, val) { items.push('
' + val + '
'); }); $('
', { '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 

Answer 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 = $("
").appendTo( $("
").appendTo(ul) ); loop(val, ul2); } else { $("
", { id: key }).text(val).appendTo(ul); } }); } $.getJSON('test.json', function(data) { var ul = $("
"); loop(data, ul); ul.addClass("my-new-list").appendTo('body'); }); 

Answer 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 = "
 " + this.data.Name; //Check if has another arrays inside the current if (this.data.SubFolders) { treestring += "
"; $("#" + myid).append(treestring); myid = this.data.ID; Tree.renderTree(this.data.Sub_Fodlers, myid); } else { treestring += "
"; $("#" + myid).append(treestring); } }; //HTML 
 
  

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

请享用 ;）