我正在嘗試將 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>uj5u.com熱心網友回復：
試試這個。請注意，每次回圈時，您都會用新內容替換先前的迭代值，這并不理想。您可能必須為回圈中的每次迭代創建新的輸出元素。
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();
uj5u.com熱心網友回復：
您在“資料”和包含物件上有兩個 .forEach() 回圈。兩者都是物件，不能直接迭代。用
Object.keys(obj)
Object.values(obj)
Object.entries(obj)
獲取包含資料的可迭代陣列
在下面的代碼片段中，這個問題得到了解決，顯示了一個物件。但仍然存在邏輯問題。你只有四個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>uj5u.com熱心網友回復：
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();
uj5u.com熱心網友回復：
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 >
<div >Name: ${value.name}</div>
<div >Code: ${value.code}</div>
<div >Spread: ${value.spread}</div>
${value.cellA ? `<div >cellA: ${value.cellA}</div>` : ``}
${value["1day"] ? `
<div >Movement: ${
value["1day"].movement}</div>
<div >Price: ${
value["1day"].price || `unknown`}</div>` : ``}
</div>`)
);
}body {
margin: 2rem;
font: 12px/15px verdana, arial;
}
.datablock {
margin-top: 0.7rem;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/341344.html
標籤：javascript html json
上一篇：合并和洗掉嵌套陣列中的元素