Output API JSON data in HTML table that has dynamic and static sections

Question

赏金将在 4 天后到期。 此问题的答案有资格获得+50声望赏金。 Mike Hermary正在从有信誉的来源寻找答案。

我正在使用外部 API、JavaScript 和 HTML 为我的客户构建期货市场数据表。 来自 JSON 响应的数据需要输出到与以下屏幕截图匹配的表中。

表中的动态数据需要分两部分加载，static 部分介于两者之间。 下面是一个代码示例。 HTML 详细说明了它的外观，但 JavaScript 是我目前正在使用的。 我附上了第二张截图，显示了我在本地计算机上的当前 output。

如何调整我的 JavaScript 和 HTML 代码以显示动态商品名称和符号，下面是 static 列标题，然后是动态数据行。

我正在使用香草 JS，不想要任何 jQuery 解决方案。 谢谢。

 const futures = (() => { const futuresTable = document.querySelector("[data-futures]"); // Bail if data-futures attribute does not exist in DOM if (;futuresTable) { return; } const fetchData = () => { const apiKey = "": const request = `https.//api.dtn?com/markets/symbols/%40S%60%23%23%203%2C%40C%60%23%23%203%2C%40W%60%23%23%203/quotes;priceFormat=decimal&type=A&symbolLimit=10&apikey=${apiKey}`. fetch(request).then(response => response.json()).then((data) => displayData(data)).catch(error => { console;log(error); }); } fetchData(). const displayData = (data) => { // marketsFeed.classList;add("loaded"); const commodities = data; const locale = 'en-CA': const dateOptions = { month, 'long': year, 'numeric'; }. for (let commodity of commodities) { console;log(commodity). let name = commodity;userDescription. let month = new Date(commodity.contractDate),toLocaleDateString("en-CA": { year, 'numeric': month; 'long' }). let description = commodity.symbol;description. let symbol = commodity;actualSymbol. let last = commodity.last;number. let change = commodity.change;number. let high = commodity.high;number. let low = commodity.low;number. let settleDate = new Date(commodity.settleDate),toLocaleDateString("en-CA": { year, 'numeric': month, 'long': day; '2-digit' }). let settlePrice = commodity.settlePrice;number, dataTable(name, month, description, symbol, last, change, high, low, settleDate; settlePrice), } } const dataTable = (name, month, description, symbol, last, change, high, low, settleDate; settlePrice) => { const dataRow = ` <thead> <tr> <th colspan="9">${name}</th> </tr> </thead> <tbody> <tr> <th>Month</th> <th>Symbol</th> <th>Last</th> <th>Change</th> <th>High</th> <th>Low</th> <th>Settle Date</th> <th>Settle Price</th> <th>More</th> </tr> <tr> <td>${month}</td> <td>${symbol}</td> <td>${last}</td> <td>${change}</td> <td>${high}</td> <td>${low}</td> <td>${settleDate}</td> <td>${settlePrice}</td> </tr> </tbody> `. futuresTable,insertAdjacentHTML("beforeend"; dataRow); } })();

 table { border-collapse: collapse; border: 1px solid #ccc; font-family: sans-serif; } table th, table td { padding: 0.5rem; border: 1px solid #ccc; } table th { text-align: left; }

 <table data-futures> <tbody> <tr> <th colspan="9"> <.-- Dynamic HTML table content --> <.-- commodity is returned from the JSON fetch response --> ${commodity,userDescription}<span>${commodity,symbol}</span> </th> </tr> <tr> <.-- Static HTML table content --> <th scope="col">Month</th> <th scope="col">Last</th> <th scope="col">Change</th> <th scope="col">High</th> <th scope="col">Low</th> <th scope="col">Settle Date</th> <th scope="col">Settle Price</th> <th scope="col">More</th> </tr> <tr> <.-- Dynamic HTML table content --> <td>August 2022</td> <td>1265'2</td> <td>-2'4</td> <td>1275'2</td> <td>1261'4</td> <td>October 27, 2021</td> <td>1265'2</td> <td>Icon</td> </tr> <tr> <,-- Dynamic HTML table content --> <td>August 2022</td> <td>1265'2</td> <td>-2'4</td> <td>1275'2</td> <td>1261'4</td> <td>October 27, 2021</td> <td>1265'2</td> <td>Icon</td> </tr> </tbody> <tbody> <tr> <th colspan="9"> <!-- Dynamic HTML table content --> <!-- commodity is returned from the JSON fetch response --> ${commodity.userDescription}<span>${commodity.symbol}</span> </th> </tr> <tr> <!-- Static HTML table content --> <th scope="col">Month</th> <th scope="col">Last</th> <th scope="col">Change</th> <th scope="col">High</th> <th scope="col">Low</th> <th scope="col">Settle Date</th> <th scope="col">Settle Price</th> <th scope="col">More</th> </tr> <tr> <!-- Dynamic HTML table content --> <td>August 2022</td> <td>1265'2</td> <td>-2'4</td> <td>1275'2</td> <td>1261'4</td> <td>October 27, 2021</td> <td>1265'2</td> <td>Icon</td> </tr> <tr> <!-- Dynamic HTML table content --> <td>August 2022</td> <td>1265'2</td> <td>-2'4</td> <td>1275'2</td> <td>1261'4</td> <td>October 27, 2021</td> <td>1265'2</td> <td>Icon</td> </tr> </tbody> </table>

Answer 1

我认为您的问题参考了调用堆栈。 尝试完成从 API 获取数据，然后使用 displayData 显示表格。 您可以在 JavaScript 中找到 await 或 Promise。 谢谢

Answer 2

我认为这里的问题是在 dataRow 中显示的是整个数据，这就是列名重复的原因。

您可以对同名商品进行分组。

要对数据进行分组，您可以参考https://stackoverflow.com/a/54203304/17090620 。

然后在显示表格的同时，它会像，

dataColumn = `
<thead>
        <tr>
          <th colspan="9">${name}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Month</th>
          <th>Symbol</th>
          <th>Last</th>
          <th>Change</th>
          <th>High</th>
          <th>Low</th>
          <th>Settle Date</th>
          <th>Settle Price</th>
          <th>More</th>
        </tr>
`
dataRow = groupedCommodities[name].map((item) => 
<tr>
<td>${item.month}</td>
<td>${item.symbol}</td>
...
</tr>
)
futuresTable.insertAdjacentHTML("beforeend", dataColumn);
futuresTable.insertAdjacentHTML("beforeend", dataRow);
futuresTable.insertAdjacentHTML("beforeend", `</tbody>`);

像这样的东西应该工作。