Htykuut

I have a datatable where I am using a framework.
For now I am only mocking data because I don't have straight directions from my boss yet.

In the datatable docs say this:

rows:
The rows prop is where you provide us with a list of all the rows that you want to render in the table. The only hard requirement is that this is an array of objects, and that each object has a unique id field available on it.

headers:
The headers prop represents the order in which the headers should appear in the table. We expect an array of objects to be passed in, where key is the name of the key in a row object, and header is the name of the header.

The headers are going to be hardcoded:

For that I have this:

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'),

    },

  ];

And before I had this hardcoded which is what I need to model and keep it exactly as it is, not hardcoded but with real data:

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'),

    }

  ];

And the real data comes like this:

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

    }

]

So, comparing the real data with the hardcoded rows, it should match like this:

      id: row.id,

      device: row.account,

      ticketNumber: row..ticketId,

      itemsCancelled: row.itemCount,

      requestDate: row.createDate

      status: row.status,

      requestedBy: row.user,

I am getting the values like this:

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

But I don't know how to assign them to the proper key: value in a new object.

PS: I am using Reactjs.

Library use for components: http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20expansion&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel

You have already done all the hard work. It's just a matter of creating a new mapped array using your key matching already shown in your question

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

  }

})