Map collection to object

Question

How to map a collection (array of objects) to object with key and value from the collection objects members? The collection is:

const collection = [{
  id: 1,
  url: 'http://url1.com'
}, {
  id: 2,
  url: 'http://url2.com'
}, {
  id: 3,
  url: 'http://url3.com'
}];

The result should be:

{
  1: 'http://url1.com',
  2: 'http://url2.com',
  3: 'http://url3.com'
}

Would be better to use lodash for this

Fraction · Answer 1 · 2019-07-04T10:34:44.000

You could use Array.reduce():

const collection = [{
  id: 1,
  url: 'http://url1.com'
}, {
  id: 2,
  url: 'http://url2.com'
}, {
  id: 3,
  url: 'http://url3.com'
}];

const output = collection.reduce((acc, {id, url}) => ({ ...acc, [id]: url }), {});

console.log(output);

using lodash _.reduce():

const collection = [{
  id: 1,
  url: 'http://url1.com'
}, {
  id: 2,
  url: 'http://url2.com'
}, {
  id: 3,
  url: 'http://url3.com'
}];

const output = _.reduce(collection, (acc, {id, url}) => ({ ...acc, [id]: url }), {});

console.log(output);

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

adiga · Accepted Answer · 2019-07-04T10:57:27.587

The simplest way is to loop through the collection array and add new key-value pair to an object like this:

const collection=[{id:1,url:'http://url1.com'},{id:2,url:'http://url2.com'},{id:3,url:'http://url3.com'}];

const ouptut = {};
for (const o of collection)
  ouptut[o.id] = o.url

console.log(ouptut)

Another approach is to use map to create a 2D array of entries like this:

[ [1,"http://url1.com"], [2,"http://url2.com"], [3,"http://url3.com"]]

Then use Object.fromEntries() to create an object from these entries

const collection=[{id:1,url:'http://url1.com'},{id:2,url:'http://url2.com'},{id:3,url:'http://url3.com'}];

const ouptut = Object.fromEntries(collection.map(o => [o.id, o.url]))

console.log(ouptut)

Interesting `fromEntries` approach. – briosheje Jul 04 '19 at 10:32 — briosheje, Jul 04 '19 at 10:32

score 0 · Answer 3 · answered Jul 04 '19 at 10:30

With lodash you can use _.keyBy() to convert the array to object with the ids as the keys, and then map the values to the url:

const collection = [{"id":1,"url":"http://url1.com"},{"id":2,"url":"http://url2.com"},{"id":3,"url":"http://url3.com"}];

const result = _.mapValues(_.keyBy(collection, 'id'), 'url');

console.log(result);

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

And the same idea with lodash/fp:

const { flow, keyBy, mapValues } = _;

const fn = flow(keyBy('id'), mapValues('url'));

const collection = [{"id":1,"url":"http://url1.com"},{"id":2,"url":"http://url2.com"},{"id":3,"url":"http://url3.com"}];

const result = fn(collection);

console.log(result);

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

score 0 · Answer 4 · answered Jul 04 '19 at 10:36

This is a more dynamic way of approaching the generation of an object. Basically, this approach maintains an array of specific keys which are the target for generating the desired output.

const collection = [{ id: 1, url: 'http://url1.com' }, {id: 2, url: 'http://url2.com'}, {id: 3,url: 'http://url3.com'}],
      keyAsEntries = [["id", "url"]];

let result = collection.reduce((a, c) => {
  keyAsEntries.forEach(([key, value]) => Object.assign(a, {[c[key]]: c[value]}));
  return a;
}, Object.create(null));

console.log(result);

.as-console-wrapper { min-height: 100%; }

score 0 · Answer 5 · answered Jul 04 '19 at 10:36

using a for loop and a variable you can achieve this. I hope this will resolve your issue.

const collection = [{
  id: 1,
  url: 'http://url1.com'
}, {
  id: 2,
  url: 'http://url2.com'
}, {
  id: 3,
  url: 'http://url3.com'
}];

const sampleFunction = (array) => {
  let output = {}
  for (let i = 0; i < collection.length; i++) {
    output[collection[i].id] = collection[i].url
  }
  return output
}



console.log(sampleFunction(collection))

Map collection to object

5 Answers5