Return multiple objects from an object in javascript map

Question

I am trying to de-structure an array of object and create sub objects from it I have an array an object like

const data = [
        {
            "id": 1,
            "locationone": "California, United States",
            "idtwo": 2,
            "locationtwo": "Atherton, United States"
        },
        {
            "id": 3,
            "locationone": "London",
            "idtwo": 4,
            "locationtwo": "New Jersey"
        }
    ]

I am trying to achieve the following result

[
  {
    id : 1,
    location : "California, United States"
  },
{
    id : 2,
    location : "Atherton, United States"
  },
{
    id : 3,
    location : "London"
  },
{
    id : 4,
    location : "New Jersey"
  },
]

I tried the following approach but it didn't work

const result= data
        .map(({ id,locationone, idtwo, locationtwo }) => ({
          name: locationone,
          id: id,
            name: locationtwo,
            id : idtwo
        
        }))

Also is there a way that newly created result array has only elements with unique id?

RenaudC5 · Accepted Answer · 2022-10-04 14:34:57Z

7

You can simply map the array to get a new array for each item and then flattern the array.

Note : This can be done using directly flatMap

Example:

const array = [{
    "id": 1,
    "locationone": "California, United States",
    "idtwo": 2,
    "locationtwo": "Atherton, United States"
  },
  {
    "id": 3,
    "locationone": "London",
    "idtwo": 4,
    "locationtwo": "New Jersey"
  }
]

const newArray = array.flatMap(({
  id,
  locationone,
  idtwo,
  locationtwo
}) => {
  return [{
      id,
      location: locationone
    },
    {
      id: idtwo,
      location: locationtwo
    }
  ]
})

console.log(newArray)

edited Oct 4, 2022 at 14:34

answered Oct 4, 2022 at 10:25

RenaudC5

3,8591 gold badge13 silver badges32 bronze badges

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

2 Comments

Areeba Akhtar Over a year ago

can we also filter out the object with unique id in the same go?

adiga Over a year ago

If you use .flatMap instead of map directly, you don't have to flat at the end

Nick Parsons · Accepted Answer · 2022-10-04 10:40:08Z

4

One option is to use .flatMap() by mapping each of your objects to an array that contains two objects (one with loccationone and another with locationtwo). The returned array of objects are flattened into the one resulting array:

const data = [ { "id": 1, "locationone": "California, United States", "idtwo": 2, "locationtwo": "Atherton, United States" }, { "id": 3, "locationone": "London", "idtwo": 4, "locationtwo": "New Jersey" } ];

const result = data.flatMap(obj => [
  {name: obj.locationone, id: obj.id},
  {name: obj.locationtwo, id : obj.idtwo}
]);
console.log(result);

edited Oct 4, 2022 at 10:40

answered Oct 4, 2022 at 10:37

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

3 Comments

Areeba Akhtar Over a year ago

can we also filter out the object with unique id in the same go?

Kartoos Over a year ago

@durayfishan if flatMap() returns an array then you can do whatever you can in normal array after flatMap() like flatMap().filter() and store the final result

Nick Parsons Over a year ago

@durayfishan what do you mean by filter out object with unique id? If there are two objects with the same id, then do you want to keep the first and remove the second, or keep the second and remove the first? Or remove both...?

adiga · Accepted Answer · 2022-10-04 10:31:51Z

1

Loop over the data, destructure the various properties from each object, and then push new two objects using those properties into a new array.

const data=[{id:1,locationone:"California, United States",idtwo:2,locationtwo:"Atherton, United States"},{id:3,locationone:"London",idtwo:4,locationtwo:"New Jersey"}];

const out = [];

for (const obj of data) {
  const { id, locationone, idtwo, locationtwo } = obj;
  out.push({ id, location: locationone });
  out.push({ id: idtwo, location: locationtwo });
}

console.log(out);

edited Oct 4, 2022 at 10:31

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Oct 4, 2022 at 10:24

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

Harry · Accepted Answer · 2022-10-08 10:08:35Z

1

let newData = new Array(0)
data.forEach(element=> {
    newData.push({id: element.id, location: element.locationone})
    newData.push({id: element.idtwo, location: element.locationtwo})
})
console.log(newData)

edited Oct 8, 2022 at 10:08

answered Oct 4, 2022 at 10:28

Harry

1057 bronze badges

2 Comments

Andy Over a year ago

map returns an array. If you're going this route you should use forEach.

General Grievance Over a year ago

Feel free to edit your answer then.

adiga · Accepted Answer · 2022-10-04 10:33:03Z

0

A solution using reduce()

const data = [{
    "id": 1,
    "locationone": "California, United States",
    "idtwo": 2,
    "locationtwo": "Atherton, United States"
  },
  {
    "id": 3,
    "locationone": "London",
    "idtwo": 4,
    "locationtwo": "New Jersey"
  }
]

let result = data.reduce((a, v) => {
  let obj1 = {}
  obj1.id = v.id
  obj1.location = v.locationone
  a.push(obj1)
  let obj2 = {}
  obj2.id = v.idtwo
  obj2.location = v.locationtwo
  a.push(obj2)
  return a
}, [])

console.log(result)

edited Oct 4, 2022 at 10:33

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Oct 4, 2022 at 10:25

flyingfox

13.5k4 gold badges30 silver badges43 bronze badges

Comments

derimalec · Accepted Answer · 2022-10-04 10:34:45Z

0

You can achieve the desired solution on multiple ways, for example let's use the high order function reduce instead on map.

const data = [
        {
            "id": 1,
            "locationone": "California, United States",
            "idtwo": 2,
            "locationtwo": "Atherton, United States"
        },
        {
            "id": 3,
            "locationone": "London",
            "idtwo": 4,
            "locationtwo": "New Jersey"
        }
    ]


const result = data.reduce((prev, {id, idtwo, locationone, locationtwo}) => {
  const newObjOne = {
    "id": id,
    "location": locationone
  }

  const newObjTwo = {
    "id": idtwo,
    "location": locationtwo
  }
  return [
    ...prev,
    newObjOne,
    newObjTwo
  ]
}, [])

console.log(result)

edited Oct 4, 2022 at 10:34

answered Oct 4, 2022 at 10:32

derimalec

414 bronze badges

Collectives™ on Stack Overflow

Return multiple objects from an object in javascript map

6 Answers 6

2 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related