jQuery JSON遍历嵌套对象

  • Z时代
  • 2024-01-10
  • 分类：问答

我目前有这个：

    $.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

回答：

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

- - value11
  - value12
- value2
- value3

因为while 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');
});

以上是 jQuery JSON遍历嵌套对象 的全部内容， 来源链接： utcz.com/qa/411213.html

回到顶部