数组内的 API 数组打印到 HTML 表
[英]API array inside array to print to a HTML table
问题描述
I am building a program to print OpenSky-network api information.
我正在构建一个程序来打印 OpenSky 网络 api 信息。 The api return array of airplanes information arrays. api 返回飞机信息数组 arrays。 I am wondering how print the airplane information to a html table.我想知道如何将飞机信息打印到 html 表中。 See it return an Array of arrays.看到它返回一个 arrays 数组。 I'm trying to print the information in the second array to the table.我正在尝试将第二个数组中的信息打印到表格中。
The code at the moment print the arrays to the columns.目前的代码将 arrays 打印到列中。
CONSOLE LOG: Console image return from api控制台日志：从 api 返回控制台图像
CURRENT RESULTS: enter image description here HTML:当前结果：在此处输入图像描述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: 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>')
})
})
}) ```
1 个解决方案
解决方案1
0 已采纳 2019-11-01 22:09:59
Although you iterate the states ( data.states ) array with $.each() , in the callback you use data.states , and not the current value (2nd param of $.each() - state in the example).尽管您使用$.each()迭代states （ data.states ）数组，但在回调中您使用data.states ，而不是当前值（ $.each()的第二个参数 - 示例中的state ）。 Your code should be something like:你的代码应该是这样的：
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>
I would iterate the states with Array.forEach() , and use destructuring to extract the cols data.我会用Array.forEach()迭代states ，并使用解构来提取 cols 数据。 Combine all relevant cols to a single array.将所有相关的列组合到一个数组中。
To render use a template literal, and iterate the array of cols.要渲染使用模板文字，并迭代 cols 数组。 For each column create a td element.为每一列创建一个td元素。 Join the strings, and wrap with a tr .加入字符串，并用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.