使用 jQuery 或 javascript 循环遍历 json 调用中的每个 obj

Question

我对 json/jQuery 和 javascript 还很陌生，所以我可能会做一些非常愚蠢的事情，所以请放轻松。此外，我已经查看了一些与我所问的问题类似的问题，但我似乎无法让它们中的任何一个对我有用。

我想要做的是从 API 调用 json 数据并获取每个对象的“image.full”属性。包含的 JSfiddle 显示了我正在尝试完成的工作，尽管在这种情况下我已经静态分配以获取单个字符（对象）“Aatrox”的图像。我提供了两个字符（对象）“Thresh”和“Aatrox”的示例数据

示例 json 数据：

{
 "data": {
   "Thresh": {
     "id": "Thresh",
     "title": "the Chain Warden",
     "name": "Thresh",
     "image": {
        "w": 48,
        "full": "Thresh.png",
        "sprite": "champion3.png",
        "group": "champion",
        "h": 48,
        "y": 0,
        "x": 48
     },
     "key": "412"
  },
  "Aatrox": {
     "id": "Aatrox",
     "title": "the Darkin Blade",
     "name": "Aatrox",
     "image": {
        "w": 48,
        "full": "Aatrox.png",
        "sprite": "champion0.png",
        "group": "champion",
        "h": 48,
        "y": 0,
        "x": 0
     },
     "key": "266"
  },

HTML：

<div class="container-fluid">
    <div class="row" id="champs"></div>
</div>

jQuery：

$.getJSON('https://prod.api.pvp.net/api/lol/static-data/na/v1/champion?  champData=image&api_key=7d315bdf-c456-4792-b5d6-eadc7ef1672f', function (json) {
    var image = json.data.Aatrox.image.full;
    $('#champs').append('<div class="col-xs-4 col-md-1"><img   src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + image + '"/></div>');
});

JSFIDDLE： http://jsfiddle.net/8S8LZ/2/

问题摘要：如何循环并获取数据中每个对象的“image.full”属性（即：Thresh、Aatrox）？另外，我意识到我的 API 密钥显示在这个问题中，所以在解决这个问题后我会得到一个新的。 :)

非常感谢任何帮助，谢谢。

Answer 1

这又快又脏，但是如果您以与现在大致相同的方式遍历每个对象并访问其图像属性，我修改了您的小提琴以创建对象列表：

$.getJSON('https://prod.api.pvp.net/api/lol/static-data/na/v1/champion?champData=image&api_key=7d315bdf-c456-4792-b5d6-eadc7ef1672f', function (json) {
    $.each(json.data, function(ix, obj) {

var image = obj.image.full;
$('#champs').append('<div class="col-xs-4 col-md-1"><img src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + image + '"/></div>');
});

});

这是我的小提琴版本：http://jsfiddle.net/dshell/zfF8u/

Answer 2

让我们分开：

• 首先，我们需要将对象属性转换为数组，这是通过Object.keys 完成的
• 然后，我们可以执行属性访问并返回每个full 属性，这是通过Array::map 完成的

类似

var images = Object.keys(json.data).map(function(key){
    return json.data[key].image.full
});

(Fiddle)

Answer 3

试试这个：

for (var prop in json.data) {
    if (json.data.hasOwnProperty(prop)) {
        console.log(prop.image.full);
    }
}

Answer 4

你可以像这样简单地使用 jquery：

$.each(data, function (key, value) {
    console.log(value.image.full);
});

查看demo。

Answer 5

您可以简单地将 json.data 分配给一个变量并使用 jquery 的 each 循环遍历它

var data = json.data;
$.each(data, function (key, value) {
    var full = value.image.full;  //alternatively value['image']['full'];

    // do whatever you want with full variable
});

Answer 6

for (var k in json.data) {
    var image = json.data[k].image.full;
    $('#champs').append('<div class="col-xs-4 col-md-1"><img   src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + image + '"/></div>');
}

Answer 7

我就是这样做的。 循环遍历响应，然后附加它。

您希望将选择器保存在变量中，因为它比每次在循环中查询 dom 更快。

这里也是你的 jsfiddle 的一个分支：http://jsfiddle.net/LwhT6/1/

$.getJSON('https://prod.api.pvp.net/api/lol/static-data/na/v1/champion?champData=image&api_key=7d315bdf-c456-4792-b5d6-eadc7ef1672f', function (json) {
    var $champContainer = $("#champs")

    for (var key in json.data) {
        var champ = json.data[key]
         ,  image = champ.image.full

        $champContainer.append('<div class="col-xs-4 col-md-1"><img src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + image + '"/></div>')
    }
});

Answer 8

你能试试this吗？

$.getJSON('https://prod.api.pvp.net/api/lol/static-data/na/v1/champion?champData=image&api_key=7d315bdf-c456-4792-b5d6-eadc7ef1672f', function( json ) {
    var image = json.data.Aatrox.image.full;    
    console.log(json);
    $.each(json.data,function(key,value){
        var name=value.image.full;
         $('#champs').append( '<div class="col-xs-4 col-md-1"><img src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + name + '"/></div>');
    });
});