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

我稍微调整了你的代码。一些评论:

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