CODEWITHSUNDEEP
javascriptarrays
Akshay
Akshay

Reputation: 391

Map parent array based on child array

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.

Upvotes: 0

Views: 1710

Answers (5)

Ivan
Ivan

Reputation: 40768

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>

Upvotes: 5

T. Short
T. Short

Reputation: 3614

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];
    }, []);

Upvotes: 1

Ashish Modi
Ashish Modi

Reputation: 7770

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));

Upvotes: 0

CaveCoder
CaveCoder

Reputation: 791

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);

Upvotes: 0

Travis James
Travis James

Reputation: 1939

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]]
        })
    }
}

Upvotes: 0

Related Questions