Map array object values to new array

Question

I have an array of objects that contain a property called rates and inside each objects rates array are id's (among other properties, not shown here for simplicity). How can I map these id's to a new array so that I have a record of all id's returned in all objects rates?

 const sampleResponse = [
   {
     id: '123',
     rates: [{ id: '123' }, { id: '456' }]
   },
   {
     id: '456',
     rates: [{ id: '789' }, { id: 'ABC' }]
   },
   {
     id: '789',
     rates: [{ id: 'DEF' }, { id: 'GHI' }]
   }
 ]

Expected Result

const result = ['123', '456', '789', 'ABC', 'DEF', 'GHI']

Nguyễn Văn Phong · Accepted Answer · 2021-01-15 08:11:41Z

You can use .concat() combines with .map() to achieve it.

const sampleObject = [
 {
   id: '123',
   rates: [{ id: '123' }, { id: '456' }]
 },
 {
   id: '456',
   rates: [{ id: '789' }, { id: 'ABC' }]
 },
 {
   id: '789',
   rates: [{ id: 'DEF' }, { id: 'GHI' }]
 }];
 
 let result = [];
 for(let item of sampleObject){
    result = result.concat(item.rates.map(r => r.id));
 } 
console.log(result);

Or .reduce like this way

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

const sampleObject = [
 {
   id: '123',
   rates: [{ id: '123' }, { id: '456' }]
 },
 {
   id: '456',
   rates: [{ id: '789' }, { id: 'ABC' }]
 },
 {
   id: '789',
   rates: [{ id: 'DEF' }, { id: 'GHI' }]
 }];
 
 const result = sampleObject.reduce((acc, x) => acc.concat(x.rates.map(r => r.id)), []);
 console.log(result);

phi-rakib · Accepted Answer · 2021-01-15 08:00:40Z

2

You could use Array.prototype.flatMap() with Array.prototype.map().

const sampleObject = [
  {
    id: '123',
    rates: [{ id: '123' }, { id: '456' }],
  },
  {
    id: '456',
    rates: [{ id: '789' }, { id: 'ABC' }],
  },
  {
    id: '789',
    rates: [{ id: 'DEF' }, { id: 'GHI' }],
  },
];
const ret = sampleObject.flatMap((x) => x.rates.map((y) => y.id));
console.log(ret);

edited Jan 15, 2021 at 8:00

answered Jan 15, 2021 at 7:55

phi-rakib

3,3222 gold badges12 silver badges21 bronze badges

4 Comments

Michael Over a year ago

Thanks for quick response! Flat Map does not look to be supported in IE :/ I'd like it to work on all browsers

VLAZ Over a year ago

@Michael you tagged this question with ecmascript-6

Michael Over a year ago

ah you're right! my mistake, this will work. thank you!

Robby Cornelissen Over a year ago

Alternative, straight from MDN

Siva Kondapi Venkata · Accepted Answer · 2021-01-15 08:31:31Z

0

Using forEach and destructuring

const rateIds = (arr, output = []) => {
  arr.forEach(({ rates }) => rates.forEach(({ id }) => output.push(id)));
  return output;
};

const sampleResponse = [
  {
    id: "123",
    rates: [{ id: "123" }, { id: "456" }],
  },
  {
    id: "456",
    rates: [{ id: "789" }, { id: "ABC" }],
  },
  {
    id: "789",
    rates: [{ id: "DEF" }, { id: "GHI" }],
  },
];

console.log(rateIds(sampleResponse));

answered Jan 15, 2021 at 8:31

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

Map array object values to new array

3 Answers 3

Comments

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Related