如何使用jQuery循环JSON？

Question

我看过很多关于这个话题的网站，但是我无法得到任何的例子和指导。

我想使用jQuery循环一些JSON。在下面的JSON示例中，我希望输出“模型-1”，然后输出“原产地”。一旦完成，我将为下一个条目做同样的事情，在本例中是“模型-2”。这可能会持续数百次，直到它完成，所以我不能具体调用条目(“模型-1”，“模型-2”，“模型-3”，等等)。以名字命名。

{
    "model-1": {
        "origin": "Japan",
        "price": "$149",
        "availability": "Available"
    },
    "model-2": {
        "origin": "USA",
        "price": "$199",
        "availability": "Available"
    }
}

这是我到目前为止要做的代码

jQuery(function($) {
    $.getJSON('/mydata.json', function(data) {

      var obj = jQuery.parseJSON(data);

    });
});

我会添加更广泛的代码，包括我的循环，但实际上，我尝试过的没有给我带来好的结果。要么我什么也得不到，它就坏了，要么我得到了一堆“未定义的”，任何帮助都会受到极大的感谢。

Answer 1

您不需要解析JSON。只有当您特别使用ajax方法和设置dataType属性作为文本，或者使用自动检测(使用ajax方法而不设置dataType属性)并且服务器返回错误的MIME类型时，才需要这样做。getJSON方法是ajax方法的包装器，dataType设置为JSON，因此它将自动解析响应。

回调函数将使用一个参数调用，该参数包含已解析为对象的响应，因此您可以循环遍历它。示例：

$.getJSON('/mydata.json', function(data) {
  $.each(data, function(key, obj){
    console.log(key + ' has origin ' + obj.origin);
  });
});

注意，对象中属性的顺序未指定。上面的代码将根据所使用的浏览器实际以不同的顺序显示项目。

Answer 2

只需使用for...in循环，并通过obj循环即可。

$.getJSON('/mydata.json', function(data) {

  var obj = jQuery.parseJSON(data);
  for(j in obj)
    {
     console.log(obj[j].origin);
    }

});

Answer 3

您可以使用$.each迭代模型：

$.each(data, function(model, value) {
    var origin = value.origin;
    // use model and origin
});

但是，模型不会按原来的顺序排列，因为Javascript对象属性在从JSON加载时不会保留顺序。如果需要保留顺序，则必须在顶层有一个数组：

[
    {
        "model": "model-1",
        "origin": "Japan",
        "price": "$149",
        "availability": "Available"
    },
    {
        "model": "model-2"
        "origin": "USA",
        "price": "$199",
        "availability": "Available"
    }
]

您可以再次使用$.each进行迭代。

$.each(data, function (index, item) {
    var model = item.model,
        origin = item.origin;
    // do whatever you need with model and origin
});

(此外，$.getJSON已经为您的函数提供了一个解析的结构，因此您不需要在那里执行JSON.parse/$.parseJSON )。