Question

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

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

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

[destination_country_name, destination_country_id , primary_cost]

其余数据可以按任何顺序排列

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_country_name |destination_country_id |primary_cost

Answer 1

您只需过滤元素中的其余键，然后使用initial和remaining创建一个新数组，现在在渲染过程中，您可以使用final按照所需顺序获取名称

let initial = ['destination_country_name', 'destination_country_id', 'primary_cost']
var x = [{
  "destination_country_id": null,
  "primary_cost": "9.50",
  "region_id": null,
  "destination_country_name": "Everywhere Else",
  "name": "xyz",
  "place": "abc"
}]

let remaining = Object.keys(x[0]).filter( val => !initial.includes(val))

let final = [...initial, ...remaining]

console.log(final)

Answer 2

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

我特意在数组中添加了更多元素（有些带有不正确的国家/地区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: 124,
    primary_cost: "5.00",
    region_id: null,
    destination_country_name: "Ireland",
    name: "xyz3",
    place: "abc3"
  },
  {
    destination_country_id: 124,
    primary_cost: "3.00",
    region_id: null,
    destination_country_name: "Ireland",
    name: "xyz3",
    place: "abc3"
  },
  {
    destination_country_id: 123,
    primary_cost: "5.00",
    region_id: null,
    destination_country_name: "Ireland",
    name: "xyz3",
    place: "abc3"
  }
];

x.sort(function(a, b) {
  var return_value = 0;
  var destName_A = a.destination_country_name.toUpperCase();
  var destName_B = b.destination_country_name.toUpperCase();
  var destID_A = a.destination_country_id;
  var destID_B = b.destination_country_id;
  var cost_A = a.primary_cost;
  var cost_B = b.primary_cost;

  if (cost_A < cost_B) {
    return_value = -1;
  }
  if (cost_A > cost_B) {
    return_value = 1;
  }
  if (destID_A < destID_B) {
    return_value = -1;
  }
  if (destID_A > destID_B) {
    return_value = 1;
  }
  if (destName_A < destName_B) {
    return_value = -1;
  }
  if (destName_A > destName_B) {
    return_value = 1;
  }
  return return_value;
});

console.log(x);

希望我能正确理解你。

Answer 3

大多数时候，您会知道如何显示数据的确切顺序。只需保持简单和清洁即可。

...
<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>
...

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

3 个答案: