获取 JSON 并显示 HTML 表

Question

这就是我正在尝试做的事情。

我创建了一个带有表格的 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>

Answer 1

您不需要表单来获取数据。我的建议：getData.onclick = () => {&nbsp; fetch('https://www.alphavantage.co/query?function=EARNINGS&symbol=IBM&apikey=demo')&nbsp; &nbsp; .then(res => res.text())&nbsp; &nbsp; .then((out) => {&nbsp; &nbsp; &nbsp; let jsonData = JSON.parse(out);&nbsp; &nbsp; &nbsp; for (let i = 0; i < jsonData.quarterlyEarnings.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; let earnings = jsonData.quarterlyEarnings[i];&nbsp; &nbsp; &nbsp; &nbsp; myData.innerHTML +=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<tr><td>" + earnings.reportedDate + "</td>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<td align='right'>" + earnings.reportedEPS + "</td>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<td align='right'>" + earnings.estimatedEPS + "</td>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<td align='right'>" + earnings.surprise + "</td></tr>";&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; })&nbsp; &nbsp; .catch(err => console.error(err));}<button type="button" id="getData">Get data</button><table>&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Reported Date</th>&nbsp; &nbsp; &nbsp; <th>Reported EPS</th>&nbsp; &nbsp; &nbsp; <th>Estimated EPS</th>&nbsp; &nbsp; &nbsp; <th>Surprise</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody id="myData">&nbsp; &nbsp; <tbody></table>

Answer 2

当您单击标签中的按钮时，您的页面将刷新，您应该像这样避免这种情况const getEarnings = (e) => {// prevent browser from refreshinge.preventDefault()fetch()}

Answer 3

一些东西：使用“onclick”而不是“onClick”（参见底部的注释）在引号内设置对 HTML 属性的调用，如下所示：onClick="getEarnings();"停止事件传播，因为您的按钮是提交类型并将强制页面重新加载。这可以通过几种方式完成：您可以将按钮类型设置为“按钮”而不是“提交”，因为后者会强制页面重新加载。您可以将事件接受到函数中，然后停止事件继续，如下所示：function getEarnings (e) {&nbsp; &nbsp; // This will stop a submit button from reloading the page&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; // Logic here}理想情况下，您应该将此逻辑完全放在脚本中，其中您的按钮具有唯一的id，您可以在 DOM 加载时定位并在其上设置事件侦听器。这样您就可以将所有这些移动到一个单独的文件中，并将表示和逻辑分开。在我的脑海中，它会是这样的：window.addEventListener('DOMContentLoaded', function () {&nbsp; &nbsp; const submit = document.getElementById('Submit');&nbsp; &nbsp; submit.addEventListener('click', function (e) {&nbsp; &nbsp; &nbsp; &nbsp;e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp;// run logic&nbsp; &nbsp; });});笔记：关于#1，使用小写字母是一个好习惯，因为在 JS 中onClick不会以相同的方式工作：onclick 或 onClick？如果您需要旧版浏览器支持，您应该注意单击事件的一些奇怪之处：addEventListener 与 onclick