Estoy tratando de analizar en html el json, sin embargo, no estoy seguro de lo que estoy haciendo mal. ¿Me podrían ayudar a solucionar esto?
Eventualmente iría sobre una mesa.
Genial tener una comprensión aquí de lo que estoy haciendo mal.
Sé que hay muchas publicaciones sobre json parse, pero no puedo encontrar una manera de mostrar este tipo de json.
luciendo como [![ingrese la descripción de la imagen aquí][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>Debería ser if(key == "1day") , no if(value == "1day") . Pero inmediatamente recibe otro error, porque data['1day'] no está definido (debería ser data["X-ABFDN"]['1day'] o data["X-ABAAA"]['1day'] o 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>