Объединение массива объектов, а также объединение массивов внутри объектов с одним и тем же ключом

Question

Итак, у меня есть массив объектов, называемый mergeItems, который имеет значение того, что вы видите ниже

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
city: [Array(13)]
miles: [Array(13)]
phone: [Array(13)]
photos: [Array(13)]
prices: [Array(13)]
state: [Array(13)]
titles: [Array(13)]
urls: [Array(13)]
who: [Array(13)]
__proto__: Object
1: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
2: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
3: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
4: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
5: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
6: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
7:
city: [Array(0)]
miles: [Array(0)]
phone: [Array(0)]
photos: [Array(0)]
prices: [Array(0)]
state: [Array(0)]
titles: [Array(0)]
urls: [Array(0)]
who: [Array(0)]
__proto__: Object
length: 8
__proto__: Array(0)

У него есть объекты внутри массива, а затем каждый объект имеет те же ключи внутри них. Я пытаюсь объединить все 7 массивов вместе, а затем также объединить все ключи city, miles, et c и массивы внутри них.

Я пробовал сделать

let newData = mergeItems.join();
setState({mainItems: newData});

но поскольку это только кажется, объединяет массивы, которые мне не нужны. Интересно, может ли кто-нибудь указать мне в правильном направлении, как с этим можно справиться. Большое спасибо =]

Мое текущее значение mergeItems:

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
1: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
2: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
3: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
4: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
5: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
6: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
7: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
length: 8
__proto__: Array(0)

Мой желаемый результат будет выглядеть так

{urls: Array(7), titles: Array(7), miles: Array(7), prices: Array(7), photos: Array(7), …}
city: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
miles: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
phone: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
photos: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
prices: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
state: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
titles: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
urls: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
who: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
__proto__: Object

Answer 1

Если я правильно понимаю, в основном у вас есть:

const input = [{ foo: 1, bar: 2}, {foo: 3, bar: 4}]

и вы хотите:

{ foo: [1, 3], bar: [2, 4] }

Другими словами, вы хотите взять массив вещей (объектов в этом case), а уменьшить до единственного значения (объект, содержащий массивы значений других объектов). Как оказалось, у Javascript есть метод для этого, и я использовал этот глагол c по какой-то причине ...

const output = input.reduce((objectWithMergedProperties, currentObject) => {
  objectWithMergedProperties.foo.push(currentObject.foo);
  objectWithMergedProperties.bar.push(currentObject.bar);

  return objectWithMergedProperties;
}, { foo: [], bar: [] });

Это работает, потому что reduce выполняет итерацию по вашему массиву , начиная с начального objectWithMergedProperties из { foo: [], bar: [] } ... но затем на каждой итерации он меняет его на все, что возвращается внутри обратного вызова.

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

Конечно, ваш пример не был с объектами со свойствами foo и bar, но, надеюсь, это демонстрирует, как вы можете использовать reduce для уменьшения любого массива с любыми значениями в один объект.

И, конечно, если бы у вас было много свойств, вы могли бы всегда делайте еще несколько итераций (через ключи вашего объекта) вместо их жесткого кодирования:

  objectWithMergedProperties.foo.push(currentObject.foo);
  objectWithMergedProperties.bar.push(currentObject.bar);

может стать:

  Object.keys(objectWithMergedProperties)
    .forEach(key => objectWithMergedProperties[key].push(currentObject[key]);

Answer 2

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

const mergeItems = [
    { urls: [1, 2, 3], titles: ['a', 'b', 'c'] },
    { urls: [4, 5, 6], titles: ['d', 'e', 'f'] }
];

let newData = {};
Object.keys(mergeItems[0]).forEach(key => {
    newData[key] = mergeItems.map(item => item[key])
});
console.log(newData);