Obtuve con éxito datos de una URL de API que desarrollé y los datos anidados de API se muestran a continuación.
He registrado el resultado en el registro de la consola y se ha obtenido y formateado con éxito.
He intentado mostrar los datos formateados en el navegador, pero no falta.
Acción del botón html al hacer clic
<button onclick="fetch();">Click</button>Aquí se mostrará el resultado después de que todo el proceso haya terminado:
<div id="data"></div>Datos formateados:
let data = [ { "id": 6, "Name": "Krakatoa", "Location": "USA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" }, { "id": 7, "Name": "Krakatoa", "Location": "USA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" }, { "id": 9, "Name": "Krakatoa", "Location": "KENYA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" }, { "id": 10, "Name": "Krakatoa", "Location": "KENYA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" }, { "id": 11, "Name": "Krakatoa", "Location": "AUSTRALIA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" } ]Proceso de formateo de datos:
data.filter( item => { iterateObject(item); }); function iterateObject(obj){ for(prop in obj){ if (typeof(obj[prop]) == "object") { iterateObject(obj[prop]); } else { if (prop == "Name" || prop == "Location" || prop == "History" || prop == "Active") { $('#data').html(prop.toUpperCase() + ': ', obj[prop]); } } } }Amablemente ayuda Estoy atascado en la visualización de datos en un navegador.
NB: solo muestra: último nombre de matriz con datos, es decir, activo:
Muestra solo la última fila ya que está usando $.html(), que reemplazará el contenido en cada iteración. Puede reemplazarlo con un apéndice como el que se muestra a continuación y verificar el resultado.
$('#data').append("<div>" + prop.toUpperCase() + ': ', obj[prop] + "</div>");PD: he agregado div entre los datos para que se muestre uno debajo del otro.
Además, no debería usar el método de filtro si solo está iterando sobre una matriz. Puede usar map o forEach para iteraciones simples.
Si desea mostrarlo como una tabla, puede probar esto:
function fetch() { let data = [ { "id": 6, "Name": "Krakatoa", "Location": "USA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" }, { "id": 7, "Name": "Krakatoa", "Location": "USA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" }, { "id": 9, "Name": "Krakatoa", "Location": "KENYA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" }, { "id": 10, "Name": "Krakatoa", "Location": "KENYA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" }, { "id": 11, "Name": "Krakatoa", "Location": "AUSTRALIA", "History": "The 1883 eruption of Krakatoa", "Active": "dormant" } ]; var col = []; for (var i = 0; i < data.length; i++) { for (var key in data[i]) { if (col.indexOf(key) === -1) { col.push(key); } } } // Creating table var table = document.createElement("table"); // Table row var tr = table.insertRow(-1); // Table header for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); } // Adding Data for (var i = 0; i < data.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); tabCell.innerHTML = data[i][col[j]]; } } // appending whole table to the container var divContainer = document.getElementById("data"); divContainer.innerHTML = ""; divContainer.appendChild(table); } <input type="button" onclick="fetch()" value="Click" /> <p id="data"></p>