How Can I .map() and Array that is nested inside an object, inside an array?

Question

I'm struggling with getting access to the data I need and wondering if somebody can please advise.

I have data that looks similar to this:

Order: [
  {
    id: 1, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 1, price: 20},
        {orderlineId: 2, price: 25}
      ]
    }
  },
  {
    id: 2, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 3, price: 10},
        {orderlineId: 4, price: 15}
      ]
    }
  }
]

How can I get access so that I can .map() the OrderLine Array?

I've gone with this, which kinda works but fails with an error part way through:

Order.map(order => {
        order.OrderLines.OrderLine.map(line => console.log(line))
      })

The above fails with orderitems.jsx:10 Uncaught TypeError: order.OrderLines.OrderLine.map is not a function

What I'm trying to achieve:

I'm using this in a nextjs(react) app and simply need to be able to list out each object from the OrderLine array to the page.

So the issue appears to be that when there is only one item in the OrderLine array, that array becomes a single object. I shall update my example data.

Example:

Order: [
  {
    id: 1, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 1, price: 20},
        {orderlineId: 2, price: 25}
      ]
    }
  },
  {
    id: 2, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 3, price: 10},
        {orderlineId: 4, price: 15}
      ]
    }
  },
  {
    id: 3,
    date: 'Its made up'
    OrderLines: {
      OrderLine: {orderlineId: 5, price: 5}
    }
  }
]

Will solve with if/else

there is a mistake in your code id:2 OrderLine syntax error. second object {orderlineId: 4, price: 22} does not have a closing brace after price:22. That is why map is failing half way through. — Mohammad Basit
– Mohammad Basit, Commented Oct 1, 2020 at 11:17
You have a curly bracket closing a square bracket and a square bracket closing a curly bracket: { [ } ] <-- That's incorrect — Pedro Lima
– Pedro Lima, Commented Oct 1, 2020 at 11:19
The current object you show is not syntactically correct - your code should throw a syntax error. Assuming the syntax is fixed, then the code doesn't throw the error you get. Please provide a minimal reproducible example so we can properly examine why the error is happening. — VLAZ
– VLAZ, Commented Oct 1, 2020 at 11:25
order.OrderLines.OrderLine.map this may happen if the OrderLine isn't an array, so I advise you before doing the map, verify if order.OrderLines.OrderLine.length > 0 — Wgg12
– Wgg12, Commented Oct 1, 2020 at 11:31

Michael Beeson · Accepted Answer · 2020-10-01 11:52:30Z

Because you're extracting multiple items per array item, I wouldn't use map, but rather reduce:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

You can perform the operation with this line:

Order.reduce((acc, cur) => [...acc, ...cur.OrderLines.OrderLine], []);

--- EDIT AFTER YOUR EDIT ---

I see now that sometimes the value of OrderLine is an Object, not an array. You could add an array check.

Order.reduce((acc, cur) => {
    if (Array.isArray(cur.OrderLines.OrderLine)) {
        return [...acc, ...cur.OrderLines.OrderLine];
    } else if (cur.OrderLines.OderLine) {
        return [...acc, cur.OrderLines.OrderLine];
    }
}, []);

Here's a snippet:

const Order = [
  {
    id: 1, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 1, price: 20
        },
        {orderlineId: 2, price: 25
        }
      ]
    }
  },
  {
    id: 2, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 3, price: 10
        },
        {orderlineId: 4, price: 15
        }
      ]
    }
  }
]

const orderLines = Order.reduce((acc, cur) => {
        if (Array.isArray(cur.OrderLines.OrderLine)) {
            return [...acc, ...cur.OrderLines.OrderLine];
        } else if (cur.OrderLines.OderLine) {
            return [...acc, cur.OrderLines.OrderLine];
        }
    }, []);

console.log(orderLines)

Collectives™ on Stack Overflow

How Can I .map() and Array that is nested inside an object, inside an array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related