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

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 5

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

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

查看demo。

Answer 6

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

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

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

8 个答案: