Я перебираю объект JSON с помощью fetch ().

Я хотел бы получить доступ к одному из объектов внутри объектов и итерировать по нему, получая доступ к парам ключ: значение и выводить значения в HTML через элементы списка.

Когда я пытаюсь вывести значения, я получаю только последнее значение из powerstats (их 6)

Что мне нужно изменить, чтобы все значения правильно отображались на моей странице?

Я попытался создать цикл for и перебрать значение value.length, однако value.length дает мне 2 в качестве ответа.

Не стесняйтесь использовать предоставленный ключ API.

function get_hero(rand_number) { const api_key = '10156555926000957'; let hero_id = rand_number; let hero_url = `https://www.superheroapi.com/api/${api_key}/${hero_id}`; fetch(hero_url) .then(res ={amp}gt; { return res.json(); }) .then( data ={amp}gt; { let ps = data.powerstats; Object.entries(ps).forEach(([key, value]) ={amp}gt; { console.log(key   ' - '   value) // key - value console.log(value.length) const smt = `{amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;${value}{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;${value}{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;${value}{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;${value}{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;${value}{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;${value}{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt;`; const power_stats = document.getElementById('powerstats'); power_stats.innerHTML = smt; }) }) .catch(function() { console.log('error') }) } 

вывод в браузере и вывод на консоль

Сри еще не пил кофе, XD

поэтому ваша проблема заключается в том, что вы заменяете все power_stats.innerHTML = smt; с smt снова и снова. Вы хотите использовать element.appendChild (element) для ДОБАВЛЕНИЯ в список. Не перезаписать

 .then(data ={amp}gt; { const ps = data.powerstats; const power_stats = document.getElementById('powerstats'); const list = document.createElement(`ul`) power_stats.appendChild(list) Object.entries(ps).forEach(([key, value]) ={amp}gt; { console.log(key   ' - '   value) // key - value console.log(value.length) const smt = document.createElement(`li`) smt.innerText = `The heroes ${key} is ${value}` list.appendChild(smt) }) }) 
FUBAR

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

В настоящее время вы используете функцию возврата void, поэтому вы не ждете fetch , поэтому вы должны вернуть обещание:

 function get_hero(rand_number) { const api_key = '10156555926000957'; let hero_id = rand_number; let hero_url = `https://www.superheroapi.com/api/${api_key}/${hero_id}`; return fetch(hero_url) .then(res ={amp}gt; { return res.json(); }) .then( data ={amp}gt; { let ps = data.powerstats; Object.entries(ps).forEach(([key, value]) ={amp}gt; { console.log(key   ' - '   value) // key - value console.log(value.length) const smt = `{amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;${value}{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt;`; const power_stats = document.getElementById('powerstats'); power_stats.innerHTML = smt; }) }) .catch(function() { console.log('error') }) } 

С помощью:

 get_hero(123).then(() ={amp}gt; console.log('done!')); 

(для меня https://www.superheroapi.com/ не отвечает, так что, возможно, это не единственная проблема)