如何从JSON对象读取值

时间:2016-12-17 19:19:51

标签: javascript jquery json

我很抱歉这种情况的特殊性,但我无法解决这个问题。

我创建了以下JSON文件:

{"characters":[
{"name":"battler", "sprites": 
    [{"img":"but_a11_aseru1.png","img":"but_a11_komaru1.png","img":"but_a21_majime1.png","img":"but_b11_majime1.png"}]
},
{"name":"eva", "sprites": 
    [{"img":"eva_a11_akire1.png","img":"eva_b11_majime1.png","img":"eva_b21_naku1.png","img":"eva_b22_warai1.png"}]
}
]}

我正在尝试使用此代码加载它,只是为了回显每个条目中第一个“精灵”的“img”值:

$.getJSON( "./char.json", function( data ) {
            for (i = 0;i < data.characters.length;i++) {
            alert(JSON.stringify(data.characters[i].sprites[0]));
    }
});

例如:我试图让它在循环的第一次迭代中返回“but_a11_aseru1.png”,为第二次迭代返回“eva_a11_akire1.png”。

我尝试了data.characters[i].sprites[0],只为第一个获得{"img":"but_a11_aseru1.png"}的值(第二个类似)。 data.characters[i].sprites.img变为未定义。我可以在“:”使用.split,但我想了解如何正确使用JSON。

有人可以指出我做错了什么吗?谢谢。

3 个答案:

答案 0 :(得分:1)

要使用您的代码获得预期输出(&#34; but_a11_aseru1.png&#34;第一次迭代),您需要使sprites数组包含与单个图像对应的项目:

{"characters":[
  {"name":"battler", "sprites": [
    "but_a11_aseru1.png",
    "but_a11_komaru1.png",
    "but_a21_majime1.png",
    "but_b11_majime1.png"
  ]},
  {"name":"eva", "sprites": [
    "eva_a11_akire1.png",
    "eva_b11_majime1.png",
    "eva_b21_naku1.png",
    "eva_b22_warai1.png"
  ]}
]}

alert(JSON.stringify(data.characters[i].sprites[0]));

{"characters":[
  {"name":"battler", "sprites": [
    {"img":"but_a11_aseru1.png"},
    {"img":"but_a11_komaru1.png"}, 
    {"img":"but_a21_majime1.png"},
    {"img":"but_b11_majime1.png"}
  ]},
  {"name":"eva", "sprites": [
    {"img":"eva_a11_akire1.png"},
    {"img":"eva_b11_majime1.png"},
    {"img":"eva_b21_naku1.png"},
    {"img":"eva_b22_warai1.png"}
  ]}
]}

alert(JSON.stringify(data.characters[i].sprites[0].img));

答案 1 :(得分:0)

您的问题是您的原始JSON格式不正确。你宣布&#34; sprites&#34;成为一个数组,但是所有asyncio.get_event_loop().run_until_complete(your_coro())个键都属于单个对象。通过使sprite成为一个对象数组而不是一个形状错误的对象的数组来解决这个问题。

img

以下代码适合我。我使用了jQuery的{ "characters": [{ "name": "battler", "sprites": [{ "img": "but_a11_aseru1.png", "img": "but_a11_komaru1.png", "img": "but_a21_majime1.png", "img": "but_b11_majime1.png" }] }, { "name": "eva", "sprites": [{ "img": "eva_a11_akire1.png", "img": "eva_b11_majime1.png", "img": "eva_b21_naku1.png", "img": "eva_b22_warai1.png" }] }] } 函数,但你可以真实地使用任何你想要遍历项目的东西。

&#13;
&#13;
$.each()
&#13;
var json_data = {
  "characters": [{
    "name": "battler",
    "sprites": [{
      "img": "but_a11_aseru1.png"
    }, {
      "img": "but_a11_komaru1.png"
    }, {
      "img": "but_a21_majime1.png"
    }, {
      "img": "but_b11_majime1.png"
    }]
  }, {
    "name": "eva",
    "sprites": [{
      "img": "eva_a11_akire1.png"
    }, {
      "img": "eva_b11_majime1.png"
    }, {
      "img": "eva_b21_naku1.png"
    }, {
      "img": "eva_b22_warai1.png"
    }]
  }]
};

$.each(json_data.characters, function(i, character) {
  console.log(character.name, " ", character.sprites[0].img);
});
&#13;
&#13;
&#13;

答案 2 :(得分:0)

你应该为精灵使用不同的结构,目前你有一个数组,其中一个对象有几个键img是相同的,浏览器只显示最后一个,其余的将被省略。

var data = {
  "characters": [
    {
      "name":"battler",
      "sprites": [
        {"img":"but_a11_aseru1.png"},
        {"img":"but_a11_komaru1.png"},
        {"img":"but_a21_majime1.png"},
        {"img":"but_b11_majime1.png"}
      ]
    },
    {
      "name":"eva",
      "sprites": [
        {"img":"eva_a11_akire1.png"},
        {"img":"eva_b11_majime1.png"},
        {"img":"eva_b21_naku1.png"},
        {"img":"eva_b22_warai1.png"}
      ]
    }
  ]
};

$.each(data.characters, function(i, char) {
  $.each(char.sprites, function(j, sprite) {
    console.log(sprite.img)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>