Map parent array based on child array

Question

I have an array where I've a name and details array that contains phone numbers and place objects. I am trying to separate the parent array by looping over the inner array. For example I have this array -

    const arr = [
        {
            id: 1,
            name: 'Person 1',
            details: [
                {
                    phone: 9999999999,
                    place: 'Mumbai',
                },
                {
                    phone: 8888888888,
                    place: 'Pune'
                }
            ]
        },
        {
            id: 2,
            name: 'Person 2',
            details: [
                {
                    phone: 7777777777,
                    place: 'Mumbai',
                },
                {
                    phone: 6666666666,
                    place: 'Pune'
                }
            ]
        }
    ]

I want to convert the array into the result array below, so I can sort, show, and list by ascending phone numbers. I just need to convert the array to the below array result for now -

    const result = [
        {
            id: 1,
            name: 'Person 1',
            details: [
                {
                    phone: 9999999999,
                    place: 'Mumbai',
                }
            ]

        },
        {
            id: 1,
            name: 'Person 1',
            details: [
                {
                    phone: 8888888888,
                    place: 'Pune'
                }
            ]

        },
        {
            id: 2,
            name: 'Person 2',
            details: [
                {
                    phone: 7777777777,
                    place: 'Mumbai',
                }
            ]
        },
        {
            id: 2,
            name: 'Person 2',
            details: [
                {
                    phone: 6666666666,
                    place: 'Pune'
                }
            ]
        }
    ]

Please help.

Answer 1

You can reduce the initial array to construct a new array. For each iteration, you can map the details property of a person to a new array that will contain the phone and place , and additionally the id and name of that person.

 const result = data.reduce((res, {id, name, details}) => { return res.concat(details.map(detail => ({ id, name, details: [detail] }))); }, []); console.log(result)

 <script>const data=[{id:1,name:"Person 1",details:[{phone:9999999999,place:"Mumbai"},{phone:8888888888,place:"Pune"}]},{id:2,name:"Person 2",details:[{phone:7777777777,place:"Mumbai"},{phone:6666666666,place:"Pune"}]}];</script>

Above, instead of looping through the details and appending to res , I've used a shortcut by returning directly res concatenated with the result of the map.

Also, with the spread operator, you could do:

 const result = data.reduce((res, {details, ...person}) => { return res.concat(details.map(detail => ({ details: [detail], ...person, }))); }, []); console.log(result)

 <script>const data=[{id:1,name:"Person 1",details:[{phone:9999999999,place:"Mumbai"},{phone:8888888888,place:"Pune"}]},{id:2,name:"Person 2",details:[{phone:7777777777,place:"Mumbai"},{phone:6666666666,place:"Pune"}]}];</script>

Answer 2

const result = []
for(let i = 0; i < arr.length; i++){
    for(let j = 0; j < arr[i].details.length; j++){
        result.push({
            ...arr[i],
            details: [arr[i].details[j]]
        })
    }
}

Answer 3

Using a for loop

const arr = [
    {
        id: 1,
        name: 'Person 1',
        details: [
            {
                phone: 9999999999,
                place: 'Mumbai',
            },
            {
                phone: 8888888888,
                place: 'Pune'
            }
        ]
    },
    {
        id: 2,
        name: 'Person 2',
        details: [
            {
                phone: 7777777777,
                place: 'Mumbai',
            },
            {
                phone: 6666666666,
                place: 'Pune'
            }
        ]
    }
];
let result = [];
for(let i=0;i < arr.length;i++){
  for(let j=0; j < arr[i].details.length;j++){ 
    result.push({
      id: arr[i].id,
      name: arr[i].name,
      details: arr[i].details[j]
    });
  }
}
console.log(result);

Answer 4

Simple forEach should do.

 const arr = [ { id: 1, name: "Person 1", details: [ { phone: 9999999999, place: "Mumbai" }, { phone: 8888888888, place: "Pune" } ] }, { id: 2, name: "Person 2", details: [ { phone: 7777777777, place: "Mumbai" }, { phone: 6666666666, place: "Pune" } ] } ]; const result = []; arr.forEach(row => { row.details.forEach(detail => { result.push({ "id": row.id, "name": row.name, "details": [detail] }); }) }); console.log(JSON.stringify(result, null, 2));

Answer 5

Here is my simple approach using reduce :

const result = arr.reduce((acc, entry) => {
        const obj = []

        entry.details.forEach(detail => {
          obj.push({
            ...entry,
            details: [
              detail
            ]
          })
        });

        return [...acc, ...obj];
    }, []);