Отображение массива объектов в определенном порядке имен заголовков в таблице

Question

У меня есть массив массив объектов, который извлекается из API. Я хочу, чтобы это отображало ключи пар ключ-значение в качестве заголовков / имен столбцов для таблицы. В настоящее время заголовки поступают в произвольном порядке.

Но я хочу отобразить поля, упомянутые в порядке массива, а затем остальные заголовки.

Я создал массив имен столбцов в нужном мне порядке

[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

Вы можете использовать Array.prototype.sort () с функцией компаратора.Здесь я сначала проверил столбцы с наименьшим приоритетом, а затем один с наивысшим приоритетом.Он жестко запрограммирован, поэтому не применим к любой ситуации, но он работает.

Я намеренно добавил больше элементов в массив (некоторые с неправильными идентификаторами стран), чтобы упорядочить элементы с правильным приоритетом.

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 2

Вы можете просто отфильтровать оставшиеся ключи от элемента и затем создать новый массив, используя 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 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>
...