javascript - 使用 jQuery 或 javascript 遍历 json 调用中的每个对象

Question

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

我想做的是从 API 调用 json 数据并获取每个对象的“image.full”属性。包含的 JSfiddle 显示了我想要完成的事情，尽管在这种情况下我已经静态分配以获得单个 Angular 色(对象)“Aatrox”的图像。我已经为两个 Angular 色(对象)“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/

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

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

Answer 1

这是快速而肮脏的，但如果你循环遍历每个对象并以与你现在做的几乎相同的方式访问它的图像属性，我修改了你的 fiddle 以创建一个对象列表:

$.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>');
});

});

这是我的 fiddle 版本:http://jsfiddle.net/dshell/zfF8u/