I'm trying to parse the json to 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>Give this a try. Note that each time through the loop, you are replacing the previous iteration values with new content, which isn't ideal. You'll probably have to create new output elements for each iteration through the loop.
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();
value in itself is an object, so if you want to display it's name, you would use value.name. Remove one forEach level from your code and iterate through the keys/values of the retrieved data (where each value is an object).
With that in mind, one way to display data is to create a block of elements per object entry, using insertAdjacentHTML. Something like:
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;
}You have two .forEach() loops on 'data' and on the containing objects. Both are objects, which you can not iterate directly. Use
Object.keys(obj)
Object.values(obj)
Object.entries(obj)
To get an iterable array with the data
In the snippet below this problem is solved an one object is displayed. But there is still a logical problem. You only have four divs, which you are refilling every round, so only the data of the last is seen in the end.
Won't correct this since I think the main issue is solved with this.
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>