JavaScript shortest way to map an array of objects to a new array of new objects?

Question

I have an array of person objects, where each person have an array of profiles objects which consist of name and an image url, and a list of addresses objects which consist of lat and long properties, as follows:

var listOfPersons = [{
    addresses : [{lat:11, long:11}, {lat:22, long:22}],
    profile: [{image:"some_url1", name: "peter parker"}]
},
{
    addresses : [{lat:33, long:33}, {lat:44, long:44}],
    profile: [{image:"some_url2", name: "bruce wayne"}]
}];

I need to create a new array of objects, where each new object has an image, long, lat properties, for each set of lat long, as follows:

var expectedResult = [
{
    image:"some_url1",
  lat:11,
  long:11
},
{
    image:"some_url1",
  lat:22,
  long:22
},
{
    image:"some_url1",
  lat:33,
  long:33
},
{
    image:"some_url1",
  lat:44,
  long:44
}
];

What is the shortest way (in terms of writing code) to map\ reduce the first array into the second?

Yes, it is an array, but I will always take the first member — Alex
– Alex, Commented Jan 7, 2020 at 15:23
Can you have more than one profile in the array, or will the profile array will always only have a single member? — Ori Drori
– Ori Drori, Commented Jan 7, 2020 at 15:30

Ori Drori · Accepted Answer · 2020-01-07 15:34:29Z

You can use nested Array.flatMap() with Array.map() to iterate the array/address/profiles, and combine image and lat, long properties into a single object:

const listOfPersons = [{"addresses":[{"lat":11,"long":11},{"lat":22,"long":22}],"profile":[{"image":"some_url1","name":"peter parker"}]},{"addresses":[{"lat":33,"long":33},{"lat":44,"long":44}],"profile":[{"image":"some_url2","name":"bruce wayne"}]}];

const result = listOfPersons.flatMap(o =>
  o.addresses.flatMap(({ lat, long }) => 
    o.profile.map(({ image }) => ({
      image,
      lat,
      long
    }))
  )
);

console.log(result);

If you always use just the 1st profile always, you can remove one level of Array.flatMap():

const listOfPersons = [{"addresses":[{"lat":11,"long":11},{"lat":22,"long":22}],"profile":[{"image":"some_url1","name":"peter parker"}]},{"addresses":[{"lat":33,"long":33},{"lat":44,"long":44}],"profile":[{"image":"some_url2","name":"bruce wayne"}]}];

const result = listOfPersons.flatMap(o =>
  o.addresses.map(({ lat, long }) =>  ({
    image: o.profile[0].image,
    lat,
    long
  }))
);

console.log(result);

norbitrial · Accepted Answer · 2020-01-07 15:29:50Z

2

You can use Array.prototype.reduce() with combined Array.prototype.forEach().

The documentation states for reduce():

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

I think the following can work for you:

const listOfPersons = [{
    addresses : [{lat:11, long:11}, {lat:22, long:22}],
    profile: [{image:"some_url1", name: "peter parker"}]
},
{
    addresses : [{lat:33, long:33}, {lat:44, long:44}],
    profile: [{image:"some_url2", name: "bruce wayne"}]
}];

const result = listOfPersons.reduce((acc, cur) => {
  cur.addresses.forEach(e => acc.push({ ...e, image: cur.profile[0].image }));   
  return acc;
}, []);

console.log(result);

I hope that helps!

edited Jan 7, 2020 at 15:29

answered Jan 7, 2020 at 15:24

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Comments

Klaycon · Accepted Answer · 2020-01-07 16:16:00Z

Sinced you asked for shortest in writing code:

var listOfPersons = [{addresses: [{lat:11, long:11}, {lat:22, long:22}],profile: [{image:"some_url1", name: "peter parker"}]},{addresses:lat:33, long:33}, {lat:44, long:44}],profile: [{image:"some_url2", name: "bruce wayne"}]}];

const res = listOfPersons.reduce((r,{addresses:a,profile:[{image}]})=> [...r,...a.map(o=>({image,...o}))],[]);

console.log(res);

Here's with formatting and better variable names:

var listOfPersons = [{
  addresses : [{lat:11, long:11}, {lat:22, long:22}],
  profile: [{image:"some_url1", name: "peter parker"}]
},
{
  addresses : [{lat:33, long:33}, {lat:44, long:44}],
  profile: [{image:"some_url2", name: "bruce wayne"}]
}];


const res = listOfPersons.reduce((acc, { addresses: adr, profile: [{image}] }) =>
  [...acc, ...adr.map(a => ({image, ...a}) )],
[]);


console.log(res);

Dan Gamble · Accepted Answer · 2020-01-07 15:24:47Z

1

var listOfPersons = [
  {
    addresses: [{ lat: 11, long: 11 }, { lat: 22, long: 22 }],
    profile: [{ image: "some_url1", name: "peter parker" }]
  },
  {
    addresses: [{ lat: 33, long: 33 }, { lat: 44, long: 44 }],
    profile: [{ image: "some_url2", name: "bruce wayne" }]
  }
];

var expectedResult = listOfPersons.reduce(
  (acc, person) => ([
    ...acc,
    ...person.addresses.map(
      address => ({ ...address, image: person.profile[0].image })
    )
  ]),
  []
)

This will give you what you want assuming you always want the first result from .profile

answered Jan 7, 2020 at 15:24

Dan Gamble

4,1852 gold badges28 silver badges46 bronze badges

Comments

Styler · Accepted Answer · 2020-01-07 15:29:31Z

0

var listOfPersons = [{
    addresses : [{lat:11, long:11}, {lat:22, long:22}],
    profile: [{image:"some_url1", name: "peter parker"}]
},
{
    addresses : [{lat:33, long:33}, {lat:44, long:44}],
    profile: [{image:"some_url2", name: "bruce wayne"}]
}];


var expectedResult = [];
expectedResult.forEach(person => {
    person.addresses.forEach(address => expectedResult.push({image: person.profile[0].image, ...address}))
});

answered Jan 7, 2020 at 15:29

Styler

323 bronze badges

Collectives™ on Stack Overflow

JavaScript shortest way to map an array of objects to a new array of new objects?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related