Сопоставить коллекцию с объектом

Question

Как сопоставить коллекцию (массив объектов) объекту с ключом и значением из членов объектов коллекции? Коллекция:

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

Результат должен быть:

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

Для этого лучше использовать lodash

Answer 1

Самый простой способ - пройти через массив collection и добавить новую пару ключ-значение к объекту, подобному этому:

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)

Другой подход заключается в использовании map для создания двумерного массива записей, например:

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

Затем используйтеObject.fromEntries() для создания объекта из этих записей

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)

Answer 2

Вы можете использовать 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);

с использованием 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>

Answer 3

используя цикл for и переменную, вы можете достичь этого. Я надеюсь, что это решит вашу проблему.

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))

Answer 4

Это более динамичный способ приблизиться к генерации объекта.По сути, этот подход поддерживает массив конкретных ключей, которые являются целью для генерации желаемого результата.

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%; }

Answer 5

С помощью lodash вы можете использовать _.keyBy() для преобразования массива в объект с ключами id s, а затем сопоставить значения с 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>

И та же идея с 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>