从 JSON 中循环遍历每个项目以显示平面信息

Question

问题

我如何设置这些飞机的工作示例。

---

背景

我的第一部分正在工作，所以我的循环似乎关闭了？我至少可以拉飞机的数量。但是显示所有平面时出现问题。

这是我的Demo on CodePen

我正在查看来自https://developers.wargaming.net/reference/all/wowp/encyclopedia/planes/?application_id=demo&r_realm=eu 的文档

但他们没有一个功能齐全的例子。我想显示飞机的名称，国家，并显示大图。我可以稍后设置它的样式，但需要一个工作示例来帮助我理解和开始。

---

代码

API

我正在从https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/?application_id=demo 提取数据

JSON 输出

HTML

<p>There are a total of <span id="planeQuantity"></span> planes in the database.</p>
<ul id="planes"></ul>

jQuery 来自

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

Javascript

var queryURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/?application_id=demo";

$.getJSON(queryURL, function (data) {

  var quantity = data.meta.count;

  $('#planeQuantity').append( quantity );

  var name = data.id.name_i8n;
  var nation = data.id.nation;
  var lrgImg = data.id.images.large;

  $(data).each(function(){
    console.log($(this).id);
    $('#planes').append('<li>' + name + 'is from ' + nation + '<img src="' + lrgImg + '">' + '</li>');
  });

})

Answer 1

我稍微调整了您的代码。一些cmets：

1. 你的data.data 是一个对象。所以，你可以为每个键迭代使用for (key in object)（你也可以使用jQuery的each，但这是一个纯JS的方法）；

2. name_i8n 实际上是name_i18n；

3. 将所有var = name、var = nation 和var = lrgImg 放入循环内。

最终代码：

var queryURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/?application_id=demo";

$.getJSON(queryURL, function (data) {

  var quantity = data.meta.count;

  $('#planeQuantity').append( quantity );

  for (key in data.data) {

    var item = data.data[key];

    var name = item.name_i18n;
    var nation = item.nation;
    var lrgImg = item.images.large;    

    $('#planes').append('<li>' + name + 'is from ' + nation + '<img src="' + lrgImg + '">' + '</li>');

  }
})

工作笔：http://codepen.io/mrlew/pen/vgaexb

---

修改了一些解释

您收到了一个 data 对象，该对象有一个 data 键，其值是具有这种结构的巨大对象（或多或少）：

{
    "7290": { /* ... */ },
    "7291": {
        "name_i18n": "North American FJ-1 Fury",
        "nation":"usa",
        "images":{
            "large":"http://worldofwarplanes....png",
            /* ... */
        },
        /* ... */
    },
    "7292": { /* ... */ }

}

因此，要遍历 data.data 键的所有键，我们可以使用 for (key in data.data) { }。

在每次迭代中，key 变量将被分配给对象key：7290、7291、7292。所以，要访问它的值，我们使用data.data[key]（例如data.data["7291"]），并为变量item赋值。

使用像这样的括号是 JavaScript 从对象中检索值的一种方法。另一种方法是使用 点表示法（但您不能将点表示法与数字键一起使用）。

这是有效的：

data["data"]["7291"]

这是无效的：

data.data.7291

Answer 2

您应该在each 中设置name、nation 和lrgImg 的值。所以你附加的元素不会都有相同的东西。并且您应该遍历 data 对象 (data.data) 中的 data 对象。像这样：

var queryURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/?application_id=demo";

$.getJSON(queryURL, function (data) {

  var quantity = data.meta.count;

  $('#planeQuantity').append( quantity );

  $.each(data.data, function(key, value){
    var name = value.name_i18n; // get the name of this data entry
    var nation = value.nation; // get the nation of this data entry
    var lrgImg = value.images.large; // ...

    $('#planes').append('<li>' + name + 'is from ' + nation + '<img src="' + lrgImg + '">' + '</li>');
  });
});

Answer 3

var queryURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/? application_id=demo";

$.getJSON(queryURL, function (data) {
    var quantity = data.meta.count;
    $('#planeQuantity').append( quantity );

   $.each(data.data, function(i, e) {
       var name = e.name_i18n;
       var nation = e.nation;
       var lrgImg = e.images.large;

       $('#planes').append('<li>' + name + 'is from ' + nation + '<img src="' + lrgImg + '">' + '</li>');
   });
});

Answer 4

您需要遍历data.data 对象。由于您不使用 dom 节点，请使用 $.each() 而不是 $.fn.each()

$.each(data.data, function(key, obj){

   console.log(key) // "4101"
   console.log(obj.name) // "type=91"
})