Nota: soy nuevo en JavaScript y html, por lo que hay muchas cosas que aún no entiendo.
Estoy tratando de crear una aplicación web que use una API de programación de autobuses para mostrar los horarios de los autobuses en mi apartamento. Logré recuperar los datos, pero me cuesta mostrarlos en el html. (editar: posiblemente sea un SDK, realmente no sé la diferencia)
// this is the function write_bus() in my javascript file departures.js: function write_bus() { document.getElementById("bustime-kong").innerHTML = data; } // 'data' is a variable in javascript that contains the information I fetched from the client, and is what I am trying to show.It is on the following format: const data = { aimedArrivalTime: '2022-01-06T12:36:00+0100', aimedDepartureTime: '2022-01-06T12:36:00+0100', cancellation: false, date: '2022-01-06', destinationDisplay: { frontText: 'xxx' }, expectedDepartureTime: '2022-01-06T12:38:12+0100', expectedArrivalTime: '2022-01-06T12:37:32+0100', forAlighting: true, forBoarding: true, notices: [], predictionInaccurate: false, quay: { id: 'xxx', name: 'xxx', publicCode: 'P2', situations: [], stopPlace: [Object] } } <script src="departures.js"></script> <input type="button" onclick="write_bus()" value="Busstider"> <br> <div id="bustime-kong"></div>(Para ahorrar espacio, eliminé 2/3 de los datos)
¡Agradezco toda la ayuda que pueda obtener!
Dado que es una matriz de datos, necesita usar el método Json.stringify ,
document.getElementById("bustime-kong").innerHTML = JSON.stringify(data);No puede insertar objetos sin procesar como ese como texto DOM. Tiene que usar propiedades específicas, pero si está tan inclinado a insertar un objeto como ese, use el método JSON.stringify() .
document.getElementById("bustime-kong").innerHTML = JSON.stringify(data);https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Por cierto, es una buena práctica poner la etiqueta <script> al final para asegurarse de que HTML se cargue antes de ejecutar JavaScript.
Puede crear una función que analizará el json e imprimirá en forma de tabla como se muestra a continuación.
// this is the function write_bus() in my javascript file departures.js: function write_bus() { document.getElementById("bustime-kong").innerHTML = createTable(data); } // 'data' is a variable in javascript that contains the information I fetched from the client, and is what I am trying to show.It is on the following format: const data = { aimedArrivalTime: '2022-01-06T12:36:00+0100', aimedDepartureTime: '2022-01-06T12:36:00+0100', cancellation: false, date: '2022-01-06', destinationDisplay: { frontText: 'xxx' }, expectedDepartureTime: '2022-01-06T12:38:12+0100', expectedArrivalTime: '2022-01-06T12:37:32+0100', forAlighting: true, forBoarding: true, notices: [], predictionInaccurate: false, quay: { id: 'xxx', name: 'xxx', publicCode: 'P2', situations: [], stopPlace: [Object] } } function createTable(data){ var table = "<table>"; for(var key in data){ table+="<tr>"; table+="<td>"+key+"</td>"; table+="<td>"+data[key]+"</td>"; table+="</tr>"; } table+="</table>"; return table; } <input type="button" onclick="write_bus()" value="Busstider"> <br> <div id="bustime-kong"></div>