亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

獲取 JSON 并顯示 HTML 表

獲取 JSON 并顯示 HTML 表

蝴蝶不菲 2024-01-18 20:44:08
這就是我正在嘗試做的事情。我創建了一個帶有表格的 HTML 頁面。我定義了除正文標簽之外的所有標簽。我有一個 javascript,它以 JSON 格式從網絡獲取數據,對其進行解析,然后使用innerHTML 將元素寫入帶有標簽的表體。如果你讓它運行,它就會完美地工作。但是,如果我將此“獲取”代碼放入函數中并從“提交”按鈕的“onclick”執行此函數,則邏輯將停止工作。我在函數的開頭放置了一個警報,我可以看到它,但獲取部分不起作用。我嘗試使用常規函數和異步(等待)。兩者都不起作用。這是我的代碼(從表單開始)。請讓我知道我做錯了什么。謝謝。<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貢獻1829條經驗 獲得超6個贊

您不需要表單來獲取數據。我的建議:


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));

}

<button type="button" id="getData">Get data</button>

<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>


查看完整回答
反對 回復 2024-01-18
?
UYOU

TA貢獻1878條經驗 獲得超4個贊

當您單擊標簽中的按鈕時,您的頁面將刷新,您應該像這樣避免這種情況


const getEarnings = (e) => {

// prevent browser from refreshing

e.preventDefault()


fetch()


}


查看完整回答
反對 回復 2024-01-18
?
德瑪西亞99

TA貢獻1770條經驗 獲得超3個贊

一些東西:

  1. 使用“onclick”而不是“onClick”(參見底部的注釋)

  2. 在引號內設置對 HTML 屬性的調用,如下所示:onClick="getEarnings();"

  3. 停止事件傳播,因為您的按鈕是提交類型并將強制頁面重新加載。這可以通過幾種方式完成:

    • 您可以將按鈕類型設置為“按鈕”而不是“提交”,因為后者會強制頁面重新加載。

    • 您可以將事件接受到函數中,然后停止事件繼續,如下所示:

function getEarnings (e) {

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

    e.preventDefault();

    // Logic here

}

理想情況下,您應該將此邏輯完全放在腳本中,其中您的按鈕具有唯一的id,您可以在 DOM 加載時定位并在其上設置事件偵聽器。這樣您就可以將所有這些移動到一個單獨的文件中,并將表示和邏輯分開。在我的腦海中,它會是這樣的:


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

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

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

       e.preventDefault();

       // run logic

    });

});

筆記:

  • 關于#1,使用小寫字母是一個好習慣,因為在 JS 中onClick不會以相同的方式工作:onclick 或 onClick?

  • 如果您需要舊版瀏覽器支持,您應該注意單擊事件的一些奇怪之處:addEventListener 與 onclick


查看完整回答
反對 回復 2024-01-18
  • 3 回答
  • 0 關注
  • 237 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號