循环遍历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

您应在name内设置nation，lrgImg和each的值。所以你追加的元素都没有相同的东西。您应该遍历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 2

我调整了你的代码。一些评论：

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从Object中检索值的一种方法。另一种方法是使用点符号（但你不能使用带有数字键的点符号）。

这是有效的：

data["data"]["7291"]

这是无效的：

data.data.7291

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"
})