I have an array of object that looks something like this.

array = [
  {
    title: Title1,
    votes: 2,
  },
  {
    title: Title2,
    votes: 1,
  },
  {
    title: Title3,
    votes: 1,
  },
];

What I am trying to do is use .map to push the titles into a new array, but based on the number of votes that object has.

For this example, it would look like this.

newArray = [Title1, Title1, Title2, Title3]

Is using .map the best way to go with this as I am working with React.

I have an array of object that looks something like this.

array = [
  {
    title: Title1,
    votes: 2,
  },
  {
    title: Title2,
    votes: 1,
  },
  {
    title: Title3,
    votes: 1,
  },
];

What I am trying to do is use .map to push the titles into a new array, but based on the number of votes that object has.

For this example, it would look like this.

newArray = [Title1, Title1, Title2, Title3]

Is using .map the best way to go with this as I am working with React.

• javascript
• arrays
• reactjs
• object
• array.prototype.map

6 Answers 6

No, Array.prototype.map is not the best for this. It is useful when you want a new array that is the same length as the original array. You can achieve what you want to do with Array.prototype.reduce:

const array = [ { title: 'Title1', votes: 2 }, { title: 'Title2', votes: 1 }, { title: 'Title3', votes: 1 } ];

const result = array.reduce( (res, el) => res.concat( Array( el.votes ).fill( el.title ) ), [] );

console.log( result );

There is also currently a proposal for an Array.prototype.flatMap function which works very nicely for your case, but doesn't have much browser support yet:

const array = [ { title: 'Title1', votes: 2 }, { title: 'Title2', votes: 1 }, { title: 'Title3', votes: 1 } ];

const result = array.flatMap( el => Array( el.votes ).fill( el.title ) );

console.log( result );

You could reduce the array by taking the votes as count for a while loop for pushing title.

var array = [{ title: 'Title1', votes: 2 }, { title: 'Title2', votes: 1 }, { title: 'Title3', votes: 1 }],
    result = array.reduce((r, { title, votes }) => {
        while (votes--) r.push(title);
        return r;
    }, []);
    
console.log(result);

You could use map with concat methods and spread syntax.

let array = [ { title: 'Title1', votes: 2 }, { title: 'Title2', votes: 1 }, { title: 'Title3', votes: 1 } ];
let result = [].concat(...array.map(({title, votes}) => Array(votes).fill(title)));
console.log(result)

Array.map only returns one value per element. You probably want something like Array.reduce:

let newArray = array.reduce((accum, curValue) => {
  for (let i = 0; i < curValue.votes; i++) {
    accum.push(curValue.title);
  }
  return accum;
}, []);

You can bine map with fill with concat like this:

Array.prototype.concat(...array.map(elem => new Array(elem.votes).fill(elem.title)))

result

["Title1", "Title1", "Title2", "Title3"]

I would use array.sort() first and than array.map() to return only the desired property like this (original array stays intact, not mutated):

var array = [{ title: 'Title1', votes: 2 }, { title: 'Title2', votes: 1 }, { title: Title3', votes: 1 }];

const result = array.sort((a, b) => a.votes > b.votes).map((item) => item.title)

console.log(result)

Titles with the same amount of votes are sorted lexiographically.