I'm trying to parse into html the json however I'm not sure what I'm doing wrong. Would you guys be able to help me to fix this?
It would eventually go on a table.
Great to have an understanding here of what I'm doing wrong.
I know there are plenty of posts regarding json parse, but I can't find a way to display this type of json?
looking like [![enter image description here][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>It should be if(key == "1day"), not if(value == "1day").
But then you immediately get another error, because data['1day'] is undefined (it should be data["X-ABFDN"]['1day'] or data["X-ABAAA"]['1day'] or 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>