I am building a program to print OpenSky-network api information. The api return array of airplanes information arrays. I am wondering how print the airplane information to a html table. See it return an Array of 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.
CONSOLE LOG: Console image return from api
CURRENT RESULTS: 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>')
})
})
}) ```