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

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 2

您在“数据”和包含对象上有两个 .forEach() 循环。两者都是对象，您不能直接对其进行迭代。使用

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

获取包含数据的可迭代数组

在下面的sn-p 中解决了这个问题，显示了一个对象。 但仍有一个逻辑问题。您只有四个 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 3

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

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)

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