我目前收到一個回傳這樣的陣列的回應
const response = [{
time: 1,
speed: 2,
direction:3,
image:'url'
},{
time: 1,
speed: 2,
direction:3,
image:'url'
},{
time: 1,
speed: 2,
direction:3,
image:'url'
},{
time: 1,
speed: 2,
direction:3,
image:'url'
}]
如何制作第一列僅包含屬性名稱的表格。然后后續的列包含來自回應的資料，分別使用影像 URL 作為標題我以前從未在 JS 中使用過表格。它還需要是動態的，以便可以使用來自物件的任意數量的鍵生成任意數量的回應結果，因為陣列中的所有物件都將具有相同的鍵
理想情況下，我希望桌子看起來像這樣，我知道這很簡單，但確實令人沮喪，因此我們將不勝感激
image image image
time 1 1 1
speed 2 2 2
direction 3 3 3
uj5u.com熱心網友回復：
不確定這是否是您想要的。您可以迭代物件的鍵和值。
<table>
<thead>
<tr>
<td />
{response.map((el) => (
<td>{el.image}</td>
))}
</tr>
</thead>
<tbody>
{Object.keys(response[0])
.filter((k) => k !== "image")
.map((k) => (
<tr>
<td>{k}</td>
{response.map((r) => (
<td>{r[k]}</td>
))}
</tr>
))}
</tbody>
</table>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/363324.html
標籤：javascript html css 反应 样式组件
上一篇：System.Diagnostics.TraceSource不向ApplicationInsights發送資料
下一篇：Django-顯示約會日期