Prueba esto. Tenga en cuenta que cada vez que pasa por el ciclo, está reemplazando los valores de iteración anteriores con contenido nuevo, lo cual no es lo ideal. Probablemente tendrá que crear nuevos elementos de salida para cada iteración a través del bucle.

 async function fetchData() { const response = await fetch('https://assets.cmcmarkets.com/json/cmc-test-most-popular-feed.json'); const data = await response.json(); console.log(data) Object.entries(data).forEach(([key, obj]) => { const Name = document.querySelector('.name'), Code = document.querySelector('.code'), Spread = document.querySelector('.spread'), CellA = document.querySelector('.cellA'); Name.innerHTML = `<div>Name: ${obj.name}</div>`; Code.innerHTML = `<div>Code: ${obj.code}</div>`; Spread.innerHTML = `<div>Spread: ${obj.spread}</div>`; CellA.innerHTML = `<div>Movement: ${obj['1day'].movement}</div><div>Price: ${obj['1day'].price}</div>`; }); } fetchData();

El value en sí mismo es un object , por lo que si desea mostrar su name , debe usar value.name . Elimine un nivel forEach de su código e itere a través de las claves/valores de los datos recuperados (donde cada valor es un object ).

Con eso en mente, una forma de mostrar datos es crear un bloque de elementos por entrada de objeto, usando insertAdjacentHTML . Algo como:

 fetchData(); async function fetchData() { const data = await fetch( 'https://assets.cmcmarkets.com/json/cmc-test-most-popular-feed.json' ) .then( r => r.json() ); Object.entries(data).forEach( ([key, value]) => document.body.insertAdjacentHTML(`beforeend`, ` <div class="datablock"> <div class="name">Name: ${value.name}</div> <div class="code">Code: ${value.code}</div> <div class="spread">Spread: ${value.spread}</div> ${value.cellA ? `<div class="cellA">cellA: ${value.cellA}</div>` : ``} ${value["1day"] ? ` <div class="movement">Movement: ${ value["1day"].movement}</div> <div class="price">Price: ${ value["1day"].price || `unknown`}</div>` : ``} </div>`) ); }

 body { margin: 2rem; font: 12px/15px verdana, arial; } .datablock { margin-bottom: 0.7rem; }

Tiene dos bucles .forEach() en 'datos' y en los objetos que los contienen. Ambos son objetos, que no puede iterar directamente. Usar

 Object.keys(obj) Object.values(obj) Object.entries(obj)

Para obtener una matriz iterable con los datos

En el fragmento a continuación, este problema se resuelve y se muestra un objeto. Pero todavía hay un problema lógico. Solo tiene cuatro divs, que está rellenando en cada ronda, por lo que al final solo se ven los datos del último.

No corregiré esto ya que creo que el problema principal se resuelve con esto.

 async function fetchData() { const response = await fetch('https://assets.cmcmarkets.com/json/cmc-test-most-popular-feed.json'); const data = await response.json(); console.log('data', data) Object.values(data).forEach(obj => { Object.entries(obj).forEach(([key, value]) => { // console.log(key, value); const Name = document.querySelector('.name'), Code = document.querySelector('.code'), Spread = document.querySelector('.spread'), CellA = document.querySelector('.cellA'); if (key == "name") { Name.innerHTML = `<div>Name: ${value}</div>`; } if (key == "code") { Code.innerHTML = `<div>Code: ${value}</div>`; } if (key == "spread") { Spread.innerHTML = `<div>Spread: ${value}</div>`; } else if (key == "1day") { } // data["X-ABFDN"]['1day'] data["X-ABAAA"]['1day'] data["X-AQWER"]['1day'] else if (key == "1day") { CellA.innerHTML = `<div>movement: ${data[key]["movement"]}</div><div>price: ${data[key]["price"]}</div>`; } }); }); } fetchData();

 <div class="name"></div> <div class="code"></div> <div class="spread"></div> <div class="cellA"></div>