0
281
ViewsNo puedo averiguar cómo mostrar estos datos en una línea separada en mi html de JS
document.querySelector("#enter").addEventListener("click", e => { e.preventDefault(); var inputValue = searchApi.value; fetch('https://wft-geo-db.p.rapidapi.com/v1/geo/cities/' +inputValue, options) .then(response => response.json()) .then(response => { console.log(response); return response; }) .then((data) => { var title = document.createElement("li") title.classList.add('list-item'); title.innerText = JSON.stringify(data); var list = document.getElementById("result-list"); list.appendChild(title); }) .catch(err => console.error(err)); });HTML se ve así
<h2 class="justify-center flex">Results</h2> <ul id="result-list"> <li class="list-item "></li> </ul> Debido a que uso JSON stringify, resulta como lo hizo, pero quiero que los datos se muestren uno por uno y no todos en una sola línea. Intenté forEach y for loop, pero no creo que lo haya hecho correctamente, por lo que se agradece cualquier ayuda. 
1 answers
Answer question0
Sus datos no son una matriz , es un objeto simple ; como tal, no puede simplemente recorrerlos por índice como lo haría con una matriz u otro iterable. Si desea obtener todas las entradas de pares clave/valor de este objeto en una matriz para iterar, puede usar Object.entries :
.then((data) => { const myData = data.data; Object.entries(myData).forEach(([key, val]) => { var title = document.createElement("li") title.classList.add("list-item"); title.innerText = `${key}: ${val}`; var list = document.getElementById("result-list"); list.appendChild(title); }); }) Tenga en cuenta que esto probablemente volverá en orden alfabético: si desea un orden específico, deberá ajustar su enfoque. También puede usar el enfoque Object.entries para otras soluciones enumeradas en su pregunta original sobre este tema .