Как отобразить массив массивов в массив объектов с данным массивом ключей?

Question

Из массива ключей и массива массивов , например:

const keys = ['foo', 'bar'];
const vals = [
  ['a', 'A'],
  ['b', 'B']
];

Как получить массив объектов как показано ниже?

[
  {'foo' : 'a', 'bar' : 'A'},
  {'foo' : 'b', 'bar' : 'B'}
]

Может быть, используя lodash?

Answer 1

Вы можете использовать loa sh 's _.zipObject(), чтобы создать объект из массива ключей и значений для каждого массива значений в вашем 2d-массиве, используя _.map() метод:

const keys = ['foo', 'bar']
const vals = [
  ['a', 'A'],
  ['b', 'B']
];

const res = _.map(vals, arr => _.zipObject(keys, arr));
console.log(res);

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

Если вы предпочитаете vanilla JS, то вы можете использовать Object.fromEntries() в сжатом массиве (созданном с использованием .map()) :

const keys = ['foo', 'bar']
const vals = [
  ['a', 'A'],
  ['b', 'B']
];

const res = vals.map(
  arr => Object.fromEntries(arr.map((v, i) => [keys[i], v]))
);
console.log(res);

Answer 2

С помощью lodash / fp вы можете сгенерировать функцию, используя _.flow(), которая карри _.zipObject() с keys и _.map() с карри _.zipObject(), а затем вы можете вызвать ее с помощью vals чтобы получить массив объектов:

const fn = _.flow(_.zipObject, _.map);

const keys = ['foo', 'bar']
const vals = [
  ['a', 'A'],
  ['b', 'B']
];

const result = fn(keys)(vals);
console.log(result);

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

Answer 3

Чтобы быть более обобщенным c, вы можете использовать Array.reduce() с index, переменная

const keys = ['foo', 'bar']
const values = [
  ['a', 'A'],
  ['b', 'B']
]

const mapped = values.map(val => val.reduce((acc, cur, i) => ({...acc, [keys[i]]: cur}),{}))

console.log(mapped)

Answer 4

let dataKeys = ['foo', 'bar'];
let dataValues = [
  ['a', 'A'],
  ['b', 'B']
];

let transformed = dataValues.reduce((result,item)=>{
  result.push(
    dataKeys.reduce((r,dk,index)=>{
      let o = {};
      o[dk]= item[index];
      return {...r, ...o}
    },{})
  )
  return result
},[]);

console.log(JSON.stringify(transformed,null,2));

Answer 5

Вы можете сделать это просто используя reduce.

let keys = ['foo', 'bar'];

let values = [
  ['a', 'A'],
  ['b', 'B']
];

const res = values.reduce((a, [first, second]) => {
    return [...a, {[keys[0]]: first, [keys[1]]: second}];
}, []);

console.log(res);

.as-console-wrapper{min-height: 100%!important; top:0}