Merging nested array using map in JS

Question

I am fetching a data from Laravel API this way

 $inventory = Gifts::with('allocation')->get();
 $response = [
   'data' => $inventory->toArray(),
 ]

The output for the above looks like the image below in the console

This is what is inside the 0: {…}

{
    "id": 1,
    "name": "Bar 1",
    "allocation": [
        {
            "id": 1,
            "location_id": "1",
            "qty": "2",
        },
        {
            "id": 2,
            "location_id": "4",
            "qty": "32",
        },
        {
            "id": 3,
            "location_id": "7",
            "qty": "12",
        }
    ]
}

I'm trying to get an output like this

{
    "isEditable": false,
    "id": 1,
    "name": "Bar 1",
    "location1": "2"
    "location4": "32"
    "location7": "12"
}

It's an array that consists of 100+ entries like this and the allocation can be more or less or maybe empty as well

What I have done so far

 const array = result.data(gift => ({ isEditable: false, ...gift }));

This adds "isEditable" field to the array.

Can you clarify the following please! Are you talking about an array or an object? Second, what is the logic behind getting your output? — Rifky Niyas
– Rifky Niyas, Commented Aug 19, 2021 at 3:49
It's an array, I am getting the output from laravel API using eloquent. — Nouman Niazi
– Nouman Niazi, Commented Aug 19, 2021 at 7:06

tony19 · Accepted Answer · 2021-08-19 14:15:30Z

1

You could use Array.prototype.map() to map the result array into a new one that only includes id, name, and the locationNN properties.

In the Array.prototype.map()'s callback:

Use the spread operator to separate the allocation property from the other properties of each array item (call it otherProps e.g.):
Spread the otherProps into a new object, inserting the isEditable property.
Map the allocation items into a key-value pair array, where the key is location_id appended to "location"; and the value is the qty property.
Use Object.fromEntries() on the key-value pair array to create an object, and spread that object into the outer object to be returned.

const output = result.map(r => {
  const { allocation, ...otherProps } = r 1️⃣
  return {
    ...otherProps, 2️⃣
    isEditable: false,
    ...Object.fromEntries( 4️⃣
      allocation.map(a => [`location${a.location_id}`, a.qty]) 3️⃣
    )
  }
})

demo

edited Aug 19, 2021 at 14:15

answered Aug 19, 2021 at 14:08

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nouman Niazi Over a year ago

This is perfect

tony19 Over a year ago

Sure, that also works :) If you don't need immutability, your way might be easier to grasp.

Gustavo Alfaro · Accepted Answer · 2021-08-19 16:12:51Z

0

This solution uses reduce

const { allocation, ...rest } = gift
const processed = allocation.reduce((acc, loc, idx) => {
  acc[`location${loc.location_id}`] = loc.qty
  return acc
}, {})
const result = { ...rest, ...processed }

console.log(result)

edited Aug 19, 2021 at 16:12

answered Aug 19, 2021 at 4:38

Gustavo Alfaro

12 bronze badges

Collectives™ on Stack Overflow

Merging nested array using map in JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related