首頁(yè) 猿問(wèn) 獲取 JSON 并顯示 HTML 表

獲取 JSON 并顯示 HTML 表

JavaScript

蝴蝶不菲 2024-01-18 20:44:08

這就是我正在嘗試做的事情。我創(chuàng)建了一個(gè)帶有表格的 HTML 頁(yè)面。我定義了除正文標(biāo)簽之外的所有標(biāo)簽。我有一個(gè) javascript，它以 JSON 格式從網(wǎng)絡(luò)獲取數(shù)據(jù)，對(duì)其進(jìn)行解析，然后使用innerHTML 將元素寫(xiě)入帶有標(biāo)簽的表體。如果你讓它運(yùn)行，它就會(huì)完美地工作。但是，如果我將此“獲取”代碼放入函數(shù)中并從“提交”按鈕的“onclick”執(zhí)行此函數(shù)，則邏輯將停止工作。我在函數(shù)的開(kāi)頭放置了一個(gè)警報(bào)，我可以看到它，但獲取部分不起作用。我嘗試使用常規(guī)函數(shù)和異步（等待）。兩者都不起作用。這是我的代碼（從表單開(kāi)始）。請(qǐng)讓我知道我做錯(cuò)了什么。謝謝。<form enctype="multipart/form-data" action="" method="post"> <button type="submit" name="submit" id="Submit" value="click" onClick = getEarnings()>Click </button></form><table> <thead> <tr"> <th>Reported Date</th> <th>Reported EPS</th> <th>Estimated EPS</th> <th>Surprise</th> </tr> </thead> <tbody id="myData"><tbody></table><script>/* function getEarnings() { */ fetch('https://www.alphavantage.co/query?function=EARNINGS&symbol=IBM&apikey=demo') .then(res => res.text()) .then((out) => { alert("I am here"); // I can't see it if from function let jsonData = JSON.parse(out); for (let i = 0; i < jsonData.quarterlyEarnings.length; i++) { let earnings = jsonData.quarterlyEarnings[i]; document.getElementById("myData").innerHTML += "<tr><td>" + earnings.reportedDate + "</td>" + "<td align='right'>" + earnings.reportedEPS + "</td>" + "<td align='right'>" + earnings.estimatedEPS + "</td>" + "<td align='right'>" + earnings.surprise + "</td></tr>"; }; }) .catch(err => console.error(err));/* } */</script>

查看完整描述

3 回答

肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊

您不需要表單來(lái)獲取數(shù)據(jù)。我的建議：

getData.onclick = () => {

fetch('https://www.alphavantage.co/query?function=EARNINGS&symbol=IBM&apikey=demo')

.then(res => res.text())

.then((out) => {

let jsonData = JSON.parse(out);

for (let i = 0; i < jsonData.quarterlyEarnings.length; i++) {

let earnings = jsonData.quarterlyEarnings[i];

myData.innerHTML +=

"<tr><td>" + earnings.reportedDate + "</td>" +

"<td align='right'>" + earnings.reportedEPS + "</td>" +

"<td align='right'>" + earnings.estimatedEPS + "</td>" +

"<td align='right'>" + earnings.surprise + "</td></tr>";

};

})

.catch(err => console.error(err));

}

<table>

<thead>

<tr>

<th>Reported Date</th>

<th>Reported EPS</th>

<th>Estimated EPS</th>

<th>Surprise</th>

</tr>

</thead>

<tbody>

</table>

反對(duì) 回復(fù) 2024-01-18

UYOU

TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊

當(dāng)您單擊標(biāo)簽中的按鈕時(shí)，您的頁(yè)面將刷新，您應(yīng)該像這樣避免這種情況

const getEarnings = (e) => {

// prevent browser from refreshing

e.preventDefault()

fetch()

}

反對(duì) 回復(fù) 2024-01-18

德瑪西亞99

TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊

一些東西：

使用“onclick”而不是“onClick”（參見(jiàn)底部的注釋?zhuān)?/p>
在引號(hào)內(nèi)設(shè)置對(duì) HTML 屬性的調(diào)用，如下所示：onClick="getEarnings();"
停止事件傳播，因?yàn)槟陌粹o是提交類(lèi)型并將強(qiáng)制頁(yè)面重新加載。這可以通過(guò)幾種方式完成：

您可以將按鈕類(lèi)型設(shè)置為“按鈕”而不是“提交”，因?yàn)楹笳邥?huì)強(qiáng)制頁(yè)面重新加載。
您可以將事件接受到函數(shù)中，然后停止事件繼續(xù)，如下所示：

function getEarnings (e) {

// This will stop a submit button from reloading the page

e.preventDefault();

// Logic here

}

理想情況下，您應(yīng)該將此邏輯完全放在腳本中，其中您的按鈕具有唯一的id，您可以在 DOM 加載時(shí)定位并在其上設(shè)置事件偵聽(tīng)器。這樣您就可以將所有這些移動(dòng)到一個(gè)單獨(dú)的文件中，并將表示和邏輯分開(kāi)。在我的腦海中，它會(huì)是這樣的：

window.addEventListener('DOMContentLoaded', function () {

const submit = document.getElementById('Submit');

submit.addEventListener('click', function (e) {

e.preventDefault();

// run logic

});

筆記：

關(guān)于#1，使用小寫(xiě)字母是一個(gè)好習(xí)慣，因?yàn)樵?JS 中onClick不會(huì)以相同的方式工作：onclick 或 onClick？
如果您需要舊版瀏覽器支持，您應(yīng)該注意單擊事件的一些奇怪之處：addEventListener 與 onclick

反對(duì) 回復(fù) 2024-01-18