Converting Array of Object to Array serially

Question

I am very new to ReactJS. I have an array of object coming from API like this:

transact = [
   {
        "id": 111,
        "trans_id": "NP2209200435",
        "order_id": "POWERRw8",
        "full_name": "Customer/INSTANT",
        "narration": "2035011W",
        "amount": "10.0000",
        "email": "[email protected]",
        "order_time": "2022-09-20 16:23:49",
        "merchant_id": "MID629dcf88a4537",
        "bank_id": null,
        "gateway": "N/A",
        "transaction_status": "Pending",
        "card_scheme": null,
        "attempts": 0,
        "review_status": null
   },
   {
       "id": 111,
       "trans_id": "NP2209200435",
       "order_id": "POWERRw8",
       "full_name": "Customer/INSTANT",
       "narration": "2035011W",
       "amount": "10.0000",
       "email": "[email protected]",
       "order_time": "2022-09-20 16:23:49",
       "merchant_id": "MID629dcf88a4537",
       "bank_id": null,
       "gateway": "N/A",
       "transaction_status": "Pending",
       "card_scheme": null,
       "attempts": 0,
       "review_status": null
   },
   {
      "id": 111,
      "trans_id": "NP2209200435",
      "order_id": "POWERRw8",
      "full_name": "Customer/INSTANT",
      "narration": "2035011W",
      "amount": "10.0000",
      "email": "[email protected]",
      "order_time": "2022-09-20 16:23:49",
      "merchant_id": "MID629dcf88a4537",
      "bank_id": null,
      "gateway": "N/A",
      "transaction_status": "Pending",
      "card_scheme": null,
      "attempts": 0,
      "review_status": null
   },
   {
      "id": 111,
      "trans_id": "NP2209200435",
      "order_id": "POWERRw8",
      "full_name": "Customer/INSTANT",
      "narration": "2035011W",
      "amount": "10.0000",
      "email": "[email protected]",
      "order_time": "2022-09-20 16:23:49",
      "merchant_id": "MID629dcf88a4537",
      "bank_id": null,
      "gateway": "N/A",
      "transaction_status": "Pending",
      "card_scheme": null,
      "attempts": 0,
      "review_status": null
  },
  {
      "id": 111,
      "trans_id": "NP2209200435",
      "order_id": "POWERRw8",
      "full_name": "Customer/INSTANT",
      "narration": "2035011W",
      "amount": "10.0000",
      "email": "[email protected]",
      "order_time": "2022-09-20 16:23:49",
      "merchant_id": "MID629dcf88a4537",
      "bank_id": null,
      "gateway": "N/A",
      "transaction_status": "Pending",
      "card_scheme": null,
      "attempts": 0,
      "review_status": null
  }
]

And I wanted to convert few of those data to array form like this:

[
   ['NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537'],
   ['NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537'],
   ['NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537'],
   ['NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537']
]

I've tried some sort solutions searched on SO, but still getting my normal tries, which are the following (Note: it added the second index into first index):

['NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537', 'NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537', 'NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537' ],
['NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537', 'NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537', 'NP2209200435', 'POWERRw8', 'Customer/INSTANT', '2035011W', '10.0000', 'MID629dcf88a4537' ]

I used:

let dataSet = [];
response.data.transactions.forEach((item) => {
    dataSet.push(
       item.trans_id,
       item.order_id,
       item.full_name,
       item.amount,
       item.transaction_status,
       item.narration,
       item.created_at
    );
});

and

const trans_id = response.data.transactions.map(item => item.trans_id)
const order_id = response.data.transactions.map(item => item.order_id)
const full_name = response.data.transactions.map(item => item.full_name)
    
dataSet = [
    trans_id,
    order_id,
    full_name
];

I need to populate it into datatable.

orimdominic · Accepted Answer · 2022-10-27 19:25:05Z

This is more of a JavaScript thing than a React thing. You can use the .map on the transact array and return an array for each item in the array like so

const expectedDataset = transact.map((t) => (
  [t.trans_id, t.order_id, t.full_name, t.narration, t.amount, t.merchant_id])
)
console.log(expectedDataset)

[
  ["NP2209200435", "POWERRw8", "Customer/INSTANT", "2035011W", "10.0000", "MID629dcf88a4537"], 
  ["NP2209200435", "POWERRw8", "Customer/INSTANT", "2035011W", "10.0000", "MID629dcf88a4537"], 
  ["NP2209200435", "POWERRw8", "Customer/INSTANT", "2035011W", "10.0000", "MID629dcf88a4537"], 
  ["NP2209200435", "POWERRw8", "Customer/INSTANT", "2035011W", "10.0000", "MID629dcf88a4537"], 
  ["NP2209200435", "POWERRw8", "Customer/INSTANT", "2035011W", "10.0000", "MID629dcf88a4537"]
]

I hope it helps.

In your solution with .forEach, if you had done it this way

let dataSet = [];
response.data.transactions.forEach((t) => {
  dataSet.push([
    t.trans_id, 
    t.order_id, 
    t.full_name, 
    t.narration, 
    t.amount, 
    t.merchant_id, 
    t.createdAt
  ]);
});

you would have gotten what you wanted.

Falola Ibrahim Ayobami · Accepted Answer · 2022-10-27 18:55:47Z

1

const convert = (arr) => {
  const newArr = arr.map((obj) => {
    delete obj.id;
    delete obj.bank_id;
    delete obj.gateway;
    delete obj.transaction_status;
    delete obj.card_scheme;
    delete obj.attempts;
    delete obj.review_status;
    delete obj.email;
    return Object.values(obj);
  });
  return newArr;
};

console.log(convert(transact));

answered Oct 27, 2022 at 18:55

Falola Ibrahim Ayobami

113 bronze badges

Collectives™ on Stack Overflow

Converting Array of Object to Array serially

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related