数组内的 API 数组以打印到 HTML 表答案

【问题标题】：API array inside array to print to a HTML table数组内的 API 数组以打印到 HTML 表
【发布时间】：2026-01-22 14:15:01
【问题描述】：

我正在构建一个程序来打印 OpenSky 网络 api 信息。飞机信息数组的api返回数组。我想知道如何将飞机信息打印到 html 表中。看到它返回一个数组数组。我正在尝试将第二个数组中的信息打印到表格中。

此刻的代码将数组打印到列。

控制台日志：Console image return from api

当前结果：enter image description here HTML：

<html>
<head>
    <title>Data</title>
    <link rel='stylesheet' href='/stylesheets/header.css' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script rel="script" src='/javascripts/displayData.js'></script>
</head>
<body>
<%include templates/header.ejs%>
<table id="data">
    <tr>
        <th>ICAO24</th>
        <th>CountryOrigin</th>
        <th>longitude</th>
        <th>latitude</th>
        <th>altitude</th>
        <th>velocity m/s</th>
    </tr>

</table>
</body>
</html>

JS：

const api_url = 'https://opensky-network.org/api/states/all?lamin=45.8389&lomin=5.9962&lamax=47.8229&lomax=10.5226';
$(document).ready(function () {
    $.get(api_url, function (data,status) {
        console.log(data.states);
            var states = (data.states);
            $.each(states, function () {
                $("#data").append('<tr><td>' + states[0] + '</td><td>' + data.states[2] + '</td><td>' + data.states[5] + '</td><td>' + data.states[6] + '</td><td>' + data.states[7] + '</td><td>' + data.states[9] + '</td></tr>')
            })
    })
}) ```

【问题讨论】：

标签： javascript jquery html arrays

【解决方案1】：

虽然您使用$.each() 迭代states (data.states) 数组，但在回调中您使用data.states，而不是当前值（$.each() 的第二个参数 - 在示例中为state） .你的代码应该是这样的：

const api_url = 'https://opensky-network.org/api/states/all?lamin=45.8389&lomin=5.9962&lamax=47.8229&lomax=10.5226';
$(document).ready(function() {
  $.get(api_url, function(data, status) {
    var states = (data.states);
    $.each(states, function(index, state) {
      $("#data").append('<tr><td>' + state[0] + '</td><td>' + state[2] + '</td><td>' + state[5] + '</td><td>' + state[6] + '</td><td>' + state[7] + '</td><td>' + state[9] + '</td></tr>')
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr>
    <th>ICAO24</th>
    <th>CountryOrigin</th>
    <th>longitude</th>
    <th>latitude</th>
    <th>altitude</th>
    <th>velocity m/s</th>
  </tr>

</table>

我会用Array.forEach() 迭代states，并使用解构来提取cols 数据。将所有相关的列组合到一个数组中。

要渲染使用模板文字，并迭代 cols 数组。为每一列创建一个td 元素。加入字符串，并用tr 换行。

const api_url = 'https://opensky-network.org/api/states/all?lamin=45.8389&lomin=5.9962&lamax=47.8229&lomax=10.5226';
$(document).ready(() => {
  $.get(api_url, ({ states }, status) => {
    const $data = $("#data");

    // use forEach and destructure the columns data
    states.forEach(([col1, , col2, , , col3, col4, col5, , col6]) => {
      const cols = [col1, col2, col3, col4, col5, col6]; // combine to a single array

      $data.append(
        `<tr>${cols.map(c => `<td>${c}</td>`).join('')}</tr>` // iterate the cols and create the cells
      );
    });
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr>
    <th>ICAO24</th>
    <th>CountryOrigin</th>
    <th>longitude</th>
    <th>latitude</th>
    <th>altitude</th>
    <th>velocity m/s</th>
  </tr>

</table>

【讨论】：

谢谢，非常感谢。它按我想要的方式工作。谢谢