javascript - 获取 JSON 并显示 HTML 表格

Question

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

我创建了一个带有表格的 HTML 页面。我定义了除 body 标签之外的所有标签。

我有一个 javascript，它以 JSON 格式从 Web 获取数据，对其进行解析，然后使用 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 = () => {
  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>