Javascript 按表中标题名称的特定顺序显示对象数组

我有一个从API获取的对象数组。我想将它的键值对键显示为表的标题/列名。目前，标题以任意随机顺序出现

但我想先显示orderArray中提到的字段，然后显示其余标题

我已经按照我想要的顺序创建了一个列名数组

[目的地国家名称、目的地国家id、主要成本]

其余的数据可以以任何顺序出现

var x = [
    {
        "destination_country_id":null,
        "primary_cost":"9.50",
        "region_id":null,
        "destination_country_name":"Everywhere Else",
        "name" : "xyz",
        "place":"abc"
    },
    {
        "destination_country_id":105,
        "primary_cost":"8.00",
        "region_id":null,
        "destination_country_name":"United Kingdom",
        "name" : "xyz1",
        "place":"abc1"
    },
    {
        "destination_country_id":209,
        "primary_cost":"9.50",
        "region_id":null,
        "destination_country_name":"United States",
        "name" : "xyz2",
        "place":"abc2"
    },
    {
        "destination_country_id":123,
        "primary_cost":"5.00",
        "region_id":null,
        "destination_country_name":"Ireland",
        "name" : "xyz3",
        "place":"abc3"
    }
]

具有列名的表（仅按以下顺序）：

---

destination\u country\u name | destination\u country\u id | primary\u cost

您只需从元素中筛选剩余的键，然后使用

initial

和

remaining

创建一个新数组，现在在渲染过程中，您可以使用

final

按所需顺序获取名称

let initial=['destination\u country\u name'，'destination\u country\u id'，'primary\u cost']
变量x=[{
“目的地国家id”：空，
“主要成本”：“9.50”，
“区域id”：空，
“目的地\国家\名称”：“其他任何地方”，
“名称”：“xyz”，
“地点”：“abc”
}]
let remaining=Object.keys（x[0]）.filter（val=>！initial.includes（val））
让final=[…初始值，…剩余值]
console.log（final）

大多数情况下，您将知道数据显示的确切顺序。保持简单和干净

...
<thead>
  <tr>
    <td>Destination Country Name</td>
    <td>Destination Country ID</td>
    <td>Primary Cost</td>
    ...
  </tr>
</thead>
<tbody>
    {x && !!x.length && x.map(item => 
      <tr key={...}>
        <td>{item.destination_country_name || ''}</td>
        <td>{item.destination_country_id || ''}</td>
        <td>{item.primary_cost || ''}</td>
        ...
      </tr>
    )}
</tbody>
...

。。。
目的国名称
目的国ID
主要成本
...
{x&&！！x.length&&x.map（项=>
{item.destination_country_name | |'''}
{item.destination_country_id | |'''}
{item.primary|u成本| |'''}
...
)}
...

您可以与比较器功能一起使用。在这里，我首先测试了优先级最低的列，然后测试了优先级最高的列。它是硬编码的，因此不适用于所有情况，但它可以工作

我特意在数组中添加了更多元素（有些元素的国家ID不正确），以确保项目的优先级正确

var x=[{
目的地\国家\标识：空，
主要成本：“9.50”，
区域id:null，
目的地\国家\名称：“其他任何地方”，
名称：“xyz”，
地点：“abc”
},
{
目的地国家识别码：105，
主要成本：“8.00”，
区域id:null，
目的地\国家\名称：“英国”，
名称：“xyz1”，
地点：“abc1”
},
{
目的地国家识别码：209，
主要成本：“9.50”，
区域id:null，
目的地\国家\名称：“美国”，
名称：“xyz2”，
地点：“abc2”
},
{
目的地国家识别号：124，
主要成本：“5.00”，
区域id:null，
目的地\国家\名称：“爱尔兰”，
名称：“xyz3”，
地点：“abc3”
},
{
目的地国家识别号：124，
主要成本：“3.00”，
区域id:null，
目的地\国家\名称：“爱尔兰”，
名称：“xyz3”，
地点：“abc3”
},
{
目的地国家识别码：123，
主要成本：“5.00”，
区域id:null，
目的地\国家\名称：“爱尔兰”，
名称：“xyz3”，
地点：“abc3”
}
];
x、 排序（功能（a、b）{
var返回值=0；
var destName_A=A.destination_country_name.toUpperCase（）；
var destName_B=B.destination_country_name.toUpperCase（）；
var destID_A=A.目的地国家id；
var destID_B=B.目的地国家id；
风险价值成本=主要成本；
风险价值成本=主要成本；
如果（成本A<成本B）{
返回_值=-1；
}
如果（成本A>成本B）{
返回_值=1；
}
如果（目的地A<目的地B）{
返回_值=-1；
}
如果（目的地A>目的地B）{
返回_值=1；
}
if（destName\u AdestName\u B）{
返回_值=1；
}
返回_值；
});
控制台日志（x）

能否添加有关如何呈现表的代码段？