时间戳

首页 > 解决方案 > 基于键数组重新排列对象键 javascript

javascript - 基于键数组重新排列对象键 javascript

问题描述

headers = ["no", "car","color","type"]

//json response
resp = [
    {"color":"green", "car":"bmw", "type": "suv", "no":"1"},
    {"color":"red", "car":"honda", "type": "sedan", "no":"2"},
    {"color":"blue", "car":"vw", "type": "truck", "no":"3"},
]

如何根据headers数组重新排列对象键：val 位置，以便我可以将它们呈现在如下表中：

不 车 颜色 类型
1 宝马 绿色 越野车
2 本田 红色的 轿车
3 大众 蓝色的 卡车

我需要使用resp如下在表格中呈现：

resp.map((i,k) => (
  <tr key={k}> 
    <td>{i["no"]<td>
    <td>{i["car"]<td>
    <td>{i["color"]<td>
    <td>{i["type"]<td>
  <tr>
}))

标签： javascriptjsonreactjs

解决方案

您不需要为您“订购”json 来形成表格。与数组不同，JavaScript 不保证对象的顺序。您可以使用maponresp根据标题列表的顺序形成表格行。

resp.map(data => {
  let row = '<tr>'
  headers.forEach(header => {
    row = row + '<td>' +data[header] + '</td>';
  });
  return row += '</tr>';
});

您只需要确保项目的headers顺序与您需要的顺序相同。

推荐阅读