I want to combine two Javascript Array with Lodash (not concat)

Question

I have two array like below

  const registers = [{ user: 'Allen', type: 'phone' }, { user: 'Eric', type: 'email' }];
  const dates = ['20171225', '20180914'];

and I want they comebine like this

const result = [
  { user: 'Allen', type: 'phone', date: '20171225' }
  { user: 'Allen', type: 'phone', date: '20180914' }
  { user: 'Eric', type: 'email', date: '20171225' }
  { user: 'Eric', type: 'email', date: '20180914' }
];

I think there is an proper function of Lodash to use in this case, but I can't find it by myself. Is there any cool geek can help to get out of this hell. Thanks~

Answer 1

I agree to use of plugins instead of rewrite what people have made available. But when It's simple, using a plugin is complicating things, it's better to use the simplier soluce when there is one.

 const registers = [{ user: 'Allen', type: 'phone', }, { user: 'Eric', type: 'email', }]; const dates = [ '20171225', '20180914', ]; const arr = registers.reduce((tmp, x) => [ ...tmp, ...dates.map(y => ({ ...x, date: y, })), ], []); console.log(arr); 

Answer 2

One method is with reduce + forEach, but any double loop should work.

 const registers = [{ user: 'Allen', type: 'phone' }, { user: 'Eric', type: 'email' }]; const dates = ['20171225', '20180914']; let answer = registers.reduce((acc, n) => { dates.forEach(x => { acc.push({user: n.user, type: n.type, date: x}); }); return acc; }, []) console.log(answer); 

Answer 3

In this case, use of lodash doesn't yield much code reduction (you could simply replace the calls to _.map(a, ...) with a.map(...) ). But well, here goes:

 const registers = [{ user: 'Allen', type: 'phone' }, { user: 'Eric', type: 'email' }]; const dates = ['20171225', '20180914']; const result = _.map(registers, ({ user, type }) => _.map(dates, (date) => ({ user, type, date }))); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.js"></script> 

Answer 4

As OP stated to use lodash , Here is a solution

Lodash Variant

 var registers = [{ user: 'Allen', type: 'phone' }, { user: 'Eric', type: 'email' }]; var dates = ['20171225', '20180914']; let result = _.map(registers, function(value, index, _source){ return _.extend(value, { date: (dates[index] || null)}); }); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js"></script> 

Vanilla JS Variant

 var registers = [{ user: 'Allen', type: 'phone' }, { user: 'Eric', type: 'email' }]; var dates = ['20171225', '20180914']; let result = registers.map(function(value, index, _source){ return Object.assign(value, { date: (dates[index] || null)}); }); console.log(result); 

Updated Answer

 var registers = [{ user: 'Allen', type: 'phone' }, { user: 'Eric', type: 'email' }]; var dates = ['20171225', '20180914']; const result = _.flatten(_.map(registers, function(value, index, _source){ return _.map(dates, (v, i, _s) => _.extend(value, { date: v})); })); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.js"></script>