1

我有一个小 ajax 调用将 json 数据加载到 DOM 中，但它不起作用。当我查看 net 选项卡时，我看到它已加载但实际页面上没有数据。它只是说[对象对象]

   $.getJSON('json/redstone.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');
   });

这是我的 JSON

{
"allconfig": {
    "card.inserted": {
        "value": "Not Inserted",
            "type": "enum",
            "range": "",
            "clone": false,
            "archive": false,
            "access": "R"
    },
        "card.cisproc": {
        "value": "Processed",
            "type": "string",
            "range": "",
            "clone": false,
            "archive": false,
            "access": "R"
    },
        "card.mfgid": {
        "value": "",
            "type": "string",
            "range": "",
            "clone": false,
            "archive": false,
            "access": "R"
    }
}
}
4

2 回答 2

2

val实际上是您的 JSON 数据中的一个对象。如果你$.each超过data，你只会得到allconfig元素。所以你可能想枚举一遍data.allconfig。

因此，您可能希望显示val'value属性，如下所示：

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

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

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

这是一个工作的jsFiddle

于 2012-11-26T20:32:02.523 回答
0

您可以尝试的另一种方法是使用常规 javascript 迭代来迭代 JSON 对象，如下所示：

for(var key in data){
    var value = data[key];
    items.push('<li id="' + key + '">' + value + '</li>');
}

编辑：我刚刚意识到你的数据结构，正如评论中有人指出的那样，有子对象或嵌套对象。我的方法本身仅适用于第一级键：值对。如果你想让你的迭代函数更通用一点，你可以使用递归来正确地遍历你的结构，如下所示：

function buildData(data){
    for(var key in data){
        var value = data[key];
        if(typeof(value) == "object"){
          nestedData = buildData(value);
          items.push('<li id="' + key + '">' + nested + '</li>');
          // I'm not sure how you want to handle your nested objects, so place
          // here what you need and whatever else you need to do to handle
          // your nested object situation.
        }else{
            items.push('<li id="' + key + '">' + value + '</li>');
        }
    }
}
于 2012-11-26T20:35:47.790 回答