Javascript Json 将数据解析为 html

Question

我正在尝试将 json 解析为 html，但是我不确定我做错了什么。 你们能帮我解决这个问题吗？

它最终会放在桌子上。

很高兴在这里了解我做错了什么。

我知道有很多关于 json 解析的帖子，但是我找不到显示这种类型 json 的方法？

看起来像 [![在此处输入图片描述][1]][1]

function readTextFile(file, callback) {
  var rawFile = new XMLHttpRequest();
  rawFile.overrideMimeType("application/json");
  rawFile.open("GET", file, true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4 && rawFile.status == "200") {
      callback(rawFile.responseText);
    }
  }
  rawFile.send(null);
}

//usage:
readTextFile("https://assets.cmcmarkets.com/json/cmc-test-most-popular-feed.json", function(text) {
  var data = JSON.parse(text);
  //console.log(data);



  var obj = JSON.parse(text, function(key, value) {


    const name = value == "name",
      code = document.querySelector('.code'),
      spread = document.querySelector('.spread');
    cellA = document.querySelector('.cellA');
    cellA.innerHTML = key;

    // name.innerHTML = `<div>movement: ${data[key]["name"]}</div>`;
    // code.innerHTML = `<div>movement: ${data[key]["code"]}</div>`;
    // spread.innerHTML = `<div>movement: ${data[key]["spread"]}</div>`;
    // cellA.innerHTML = `<div>movement: ${data[key]["1day"]}</div>`;

    if (value == "name") {
      document.querySelector('.name').innerHTML = `<div>Name: ${data[key]["name"]}</div>`;
    }

    if (value == "1day") {
      cellA.innerHTML = `<div>movement: ${data[key]["movement"]}</div><div>price: ${data[key]["price"]}</div>`;
    }
    console.log(key);
  });
});

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

Answer 1

应该是if(key == "1day")，而不是if(value == "1day")。 但随后你立即得到另一个错误，因为 data['1day'] 未定义（它应该是 data["X-ABFDN"]['1day'] 或 data["X-ABAAA"]['1day'] 或 data["X-AQWER"]['1day']）

function readTextFile(file, callback) {
  var rawFile = new XMLHttpRequest();
  rawFile.overrideMimeType("application/json");
  rawFile.open("GET", file, true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4 && rawFile.status == "200") {
      callback(rawFile.responseText);
    }
  }
  rawFile.send(null);
}

//usage:
readTextFile("https://assets.cmcmarkets.com/json/cmc-test-most-popular-feed.json", function(text) {
  var data = JSON.parse(text);
  // console.log(data);

  var obj = JSON.parse(text, function(key, value) {
    const name = value == "name",
      code = document.querySelector('.code'),
      spread = document.querySelector('.spread');
    cellA = document.querySelector('.cellA');
    cellA.innerHTML = key;

    // name.innerHTML = `<div>movement: ${data[key]["name"]}</div>`;
    // code.innerHTML = `<div>movement: ${data[key]["code"]}</div>`;
    // spread.innerHTML = `<div>movement: ${data[key]["spread"]}</div>`;
    // cellA.innerHTML = `<div>movement: ${data[key]["1day"]}</div>`;

    console.log(`key='${key}', value='${value}'`);

    if (key == "name") {
      document.querySelector('.name').innerHTML = `<div>Name: ${data[key]["name"]}</div>`;
    }

    if (key == "1day") {
      const html = `<div>movement: ${data[key]["movement"]}</div><div>price: ${data[key]["price"]}</div>`;
      console.log("html=" + html);
      cellA.innerHTML = html;
    }
    console.log(key);
  });
});

.cellA {
  border: red dashed 1px;
}

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