Я не могу понять, как отображать эти данные в отдельной строке в моем html из 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.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, но не думаю, что сделал это правильно, поэтому любая помощь приветствуется. Я не могу понять, как отображать эти данные в отдельной строке в моем html из JSЯ не могу понять, как отображать эти данные в отдельной строке в моем html из JS

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
23
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваши данные не являются множество, это простой объект - как таковые, вы не можете просто перебрать их по индексу, как массив или другой итеративный объект. Если вы хотите получить все записи пары ключ/значение из этого объекта в массив для итерации, вы можете использовать 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 для других решений, перечисленных в ваш оригинальный вопрос по этой теме.

Другие вопросы по теме