如何访问对象数组中的数组 React JS

Question

I'm working on react e-commerce project as a learning process and stuck in a situation where I have array of orders which contains multiple order objects, and inside order there's an array of OrderItems containing orderItem objects.

Here's the Array structure of two orders for reference.

myOrders: [
  {
    id: 1,
    order_items: [
      {
        prod_id: 1,
        name: 123,
        qty: 1,
      },
      {
        prod_id: 1,
        name: 123,
        qty: 1,
      },
    ],
  },

  {
    id: 2,
    order_items: [
      {
        prod_id: 4,
        name: "xyz",
        qty: 2,
      },
      {
        prod_id: 5,
        name: "abc",
        qty: 5,
      },
    ],
  },
];

How do I access order_items for all orders respectively? What I have tried so far is: Retrieved myOrders from reducer using useSelector, then destructured it to get order_items and used

order_items.map()

function, but it throws an error saying

Can't find map of undefined

I'm learning React JS and not an expert yet. Would really appreciate any kind of help from all the experts out there.

Thanks in advance

Answer 1

You can try map function on myOrders array to retrieve order_items and the flat those into 1 single array

 let myOrders = [ { id: 1, order_items: [ { prod_id: 1, name: '123', qty: 1 }, { prod_id: 1, name: '123', qty: 1 } ] }, { id: 2, order_items: [ { prod_id: 4, name: 'xyz', qty: 2 }, { prod_id: 5, name: 'abc', qty: 5 } ] } ]; let result = myOrders.map(i => i.order_items).flat(); console.log(result);

Answer 2

 const myOrders = [{id:1,order_items:[{prod_id:1,name:123,qty:1},{prod_id:1,name:123,qty:1}]},{id:2,order_items:[{prod_id:4,name:"xyz",qty:2},{prod_id:5,name:"abc",qty:5}]}]; const out = myOrders.reduce((a, b) => { a.push(...b.order_items); return a; }, []); console.log(out);