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.info(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 выглядит так
<h2 class = "justify-center flex">Results</h2>
<ul id = "result-list">
<li class = "list-item "></li>
</ul>
Т.к. я использую JSON stringify получается как и было, но я хочу чтобы данные выводились по одному а не все в одну строку. Я пробовал цикл forEach и for, но не думаю, что сделал это правильно, поэтому любая помощь приветствуется.
Ваши данные не являются множество, это простой объект - как таковые, вы не можете просто перебрать их по индексу, как массив или другой итеративный объект. Если вы хотите получить все записи пары ключ/значение из этого объекта в массив для итерации, вы можете использовать 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);
});
})
Обратите внимание, что это, вероятно, вернется в алфавитном порядке - если вы хотите определенный порядок, вам нужно будет скорректировать свой подход. Вы также можете использовать подход Object.entries
для других решений, перечисленных в ваш оригинальный вопрос по этой теме.