Javascript 將 json 數據循環到 html forEach 問題中

Question

我正在嘗試將 json 解析為 html。

• 使用 forEach 函數循環數據有問題。 不知道為什么？
• 這些值也沒有正確顯示。
• 我希望能夠顯示數據並循環到 html 中。

 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.forEach(obj => { Object.entries(data).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>

Answer 1

試試這個。 請注意，每次循環時，您都會用新內容替換之前的迭代值，這並不理想。 您可能必須為循環中的每次迭代創建新的輸出元素。

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();

Answer 2

value本身就是一個object ，所以如果你想顯示它的name ，你可以使用value.name 。 從代碼中刪除一個forEach級別並遍歷檢索到的數據的鍵/值（其中每個值都是一個object ）。

考慮到這一點，顯示數據的一種方法是使用insertAdjacentHTML為每個對象條目創建一個元素塊。 就像是：

 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; }

Answer 3

您在“數據”和包含對象上有兩個 .forEach() 循環。 兩者都是對象，不能直接迭代。 用

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

獲取包含數據的可迭代數組

在下面的代碼片段中，這個問題得到了解決，顯示了一個對象。 但仍然存在邏輯問題。 你只有四個div，每輪都在重新填充，所以最后只能看到最后一個的數據。

不會糾正這個，因為我認為主要問題已經解決了。

 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>

Answer 4

 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)

//This is the line you are missing
const dataArray = Object.values(data)
console.log(dataArray)

dataArray.forEach(obj => {
  console.log(obj);

  const Name = document.querySelector('.name');
  const Code = document.querySelector('.code')
  const Spread = document.querySelector('.spread');
  const 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>CellA: ${obj.1day.movement}</div>`;
  //For 1day never start your variable nams with a number
});



 }

  fetchData();