Как я могу смоделировать данные для данных?

Question

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

В документах с данными можно сказать:

rows: rowsprop - это то, где вы предоставляете нам список всех строк, которые вы хотите отобразить в таблице.Единственным жестким требованием является то, что это массив объектов, и что у каждого объекта есть уникальное поле id, доступное для него.

headers: headers prop представляет порядок, в котором заголовкидолжен появиться в таблице.Мы ожидаем, что будет передан массив объектов, где key - это имя ключа в объекте строки, а header - это имя заголовка.

Заголовки собираютсябыть жестко закодированным:

Для этого у меня есть это:

const tableHeaders = [
    {
      key: 'device',
      header: t('cancellations.device'),
    },
    {
      key: 'ticketNumber',
      header: t('cancellations.ticketNumber'),
    },
    {
      key: 'itemsCancelled',
      header: t('cancellations.itemsCancelled'),
    },
    {
      key: 'requestDate',
      header: t('cancellations.requestDate'),
    },
    {
      key: 'status',
      header: t('cancellations.status'),
    },
    {
      key: 'requestedBy',
      header: t('cancellations.requestedBy'),
    },
  ];

И до того, как у меня был этот жестко закодированный, это то, что мне нужно смоделировать и сохранить его точно таким, как есть, не жестко, нореальные данные:

const rows = [
    {
      id: 'a',
      device: t('Device 1'),
      ticketNumber: t('Ticket Number'),
      itemsCancelled: t('Items Cancelled'),
      requestDate: t('Request Date'),
      status: t('Status'),
      requestedBy: t('Requested By'),
    },
    {
      id: 'b',
      device: t('Device 2'),
      ticketNumber: t('Ticket Number'),
      itemsCancelled: t('Items Cancelled'),
      requestDate: t('Request Date'),
      status: t('Status'),
      requestedBy: t('Requested By'),
    },
    {
      id: 'c',
      device: t('Device 3'),
      ticketNumber: t('Ticket Number'),
      itemsCancelled: t('Items Cancelled'),
      requestDate: t('Request Date'),
      status: t('Status'),
      requestedBy: t('Requested By'),
    }
  ];

И реальные данные выглядят так:

"CancellationRequests": [
    {
      "accountId": 232279,
      "billingCancelReasonId": null,
      "createDate": "2018-09-18T11:28:47-07:00",
      "id": 17195077,
      "modifyDate": "2018-09-18T11:28:48-07:00",
      "notes": null,
      "statusId": 2,
      "ticketId": 65626859,
      "account": null,
      "items": null,
      "status": null,
      "ticket": null,
      "user": null,
      "itemCount": null,
      "__typename": "SoftLayer_Billing_Item_Cancellation_Request"
    },
    {
      "accountId": 232279,
      "billingCancelReasonId": null,
      "createDate": "2018-09-10T11:11:05-07:00",
      "id": 17183859,
      "modifyDate": "2018-09-10T11:11:06-07:00",
      "notes": null,
      "statusId": 2,
      "ticketId": 65169379,
      "account": null,
      "items": null,
      "status": null,
      "ticket": null,
      "user": null,
      "itemCount": null,
      "__typename": "SoftLayer_Billing_Item_Cancellation_Request"
    }
]

Итак, сравнивая реальные данные с жестко закодированными строками, они должны совпадать так:

      id: row.id,
      device: row.account,
      ticketNumber: row..ticketId,
      itemsCancelled: row.itemCount,
      requestDate: row.createDate
      status: row.status,
      requestedBy: row.user,

Я получаю такие значения:

data.SoftLayerCancellationRequests.map (item => item);

Но я не знаю, как назначить их соответствующимkey: value в новом объекте.

PS: я использую Reactjs.

Использование библиотеки для компонентов: http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20expansion&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel

Answer 1

Вы уже проделали всю тяжелую работу.Это просто вопрос создания нового сопоставленного массива с использованием соответствия ключей, уже показанного в вашем вопросе

const rows = APIArray.map(row => {
  return {
    id: row.id,
    device: row.account,
    ticketNumber: row.ticketId,
    itemsCancelled: row.itemCount,
    requestDate: row.createDate
    status: row.status,
    requestedBy: row.user
  }
})