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?

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?

• javascript

Share Improve this question Follow edited Oct 4, 2022 at 10:26 RenaudC5 3,83911 gold badge1313 silver badges3030 bronze badges asked Oct 4, 2022 at 10:19 Areeba AkhtarAreeba Akhtar 13722 silver badges1212 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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)

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

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

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)

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)

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)