我正在嘗試提供來自本地服務器的計算結果串列。在控制臺上，資料顯示為物件陣列，但在頁面上顯示為每個 li 的分隔字串字符。如何在每個 li 中顯示每個物件的內容？
這是控制臺記錄的內容：
[{"number":11,"result":89,"createdDate":1581587946359,"_id":"4yS9mgRDE1LoBoyF"},{"number":12,"result":144,"createdDate":1645041579497,"_id ":"HoFmbQrx1fgvChUH"},{"number":30,"result":832040,"createdDate":1581587975438,"_id":"KUonsyueRqD78mSv"},{"number":12,"result":144,"createdDate ":1644936618090,"_id":"SY5oVvt6Go2Ivsql"},{"number":3,"result":2,"createdDate":1645015992250,"_id":"UuFkzs48RMkzySGW"},{"number":12,"result ":144,"createdDate":1644935649784,"_id":"Wx3UgQ5bghSnGJqv"}]
const list = document.getElementById("list");
fetch(resultURL)
.then((response) => response.json())
.then((data) => {
const calcResults = JSON.stringify(data.results);
console.log(calcResults);
for (let i = 0; i < calcResults.length; i ) {
let li = document.createElement("li");
li.innerHTML = calcResults[i];
list.appendChild(li);
}
});
}
window.addEventListener("load", fibonacci);
uj5u.com熱心網友回復：
我有你的問題。您正在將完整的物件附加到 DOM。相反，您需要將 Object 的值附加到 DOM。看下面的例子，我附加了計算的結果data[i].result，你可以這樣做任何值。
var data = [{"number":11,"result":89,"createdDate":1581587946359,"_id":"4yS9mgRDE1LoBoyF"},{"number":12,"result":144,"createdDate":1645041579497,"_id":"HoFmbQrx1fgvChUH"},{"number":30,"result":832040,"createdDate":1581587975438,"_id":"KUonsyueRqD78mSv"},{"number":12,"result":144,"createdDate":1644936618090,"_id":"SY5oVvt6Go2Ivsql"},{"number":3,"result":2,"createdDate":1645015992250,"_id":"UuFkzs48RMkzySGW"},{"number":12,"result":144,"createdDate":1644935649784,"_id":"Wx3UgQ5bghSnGJqv"},{"number":5,"result":5,"createdDate":1623234311998,"_id":"XT2rgLbEQC5ADC2J"},{"number":4,"result":3,"createdDate":1644936028242,"_id":"YXmMmbYvrekHQar4"},{"number":8,"result":21,"createdDate":1623234317407,"_id":"b5M24lLggweXY24L"},{"number":10,"result":55,"createdDate":1581587938016,"_id":"itAGET6wHw6wcxfN"},{"number":11,"result":89,"createdDate":1645015996622,"_id":"jD3M4opGHCmS7yiM"},{"number":6,"result":8,"createdDate":1644935779049,"_id":"jFFWDD6ir6U2Z4pH"},{"number":12,"result":144,"createdDate":1644936046931,"_id":"jG2G6GoP9ZJRMNim"},{"number":5,"result":5,"createdDate":1644935775114,"_id":"xu1oairIRQbE19G1"}]
const list = document.getElementById("list");
for (let i = 0; i < data.length; i ) {
let li = document.createElement("li");
li.innerHTML = data[i].result;
list.appendChild(li);
}<ul id="list">
</ul>uj5u.com熱心網友回復：
你calcResults是一個字串，而不是一個物件。改為使用data.results。
從外觀上看，您的結果是檔案形狀：{ results: Result[] }，因此datafetch 包含一個具有results成員的檔案。
您已經呼叫 json() 將物件轉換為物件，因此繁重的作業已經完成。
for (let i = 0; i < data.results.length; i ) {
let li = document.createElement("li");
li.innerHTML = data.results[i];
list.appendChild(li);
}
作為旁注，如果您記錄data.results而不是對其進行字串化，您的除錯視窗將允許您展開/折疊。
console.log(data.results);
uj5u.com熱心網友回復：
發生這種情況是因為您使用JSON.stringify而不是JSON.parse. 所以你基本上是在一個字串上回圈，當你參考時，calcResults[i]你會得到字串索引處的字符。
您需要呼叫JSON.parse(data.result)才能將字串轉換為 JS 物件。然后你可以遍歷 JS Array 的物件。
但是，如果您的本地服務器使用 JSON 正文決議器，您實際上不需要呼叫JSON.parse結果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/426810.html
標籤：javascript json 拿来