Группировать объекты с ключами на основе их индекса в новый массив

Кто-нибудь знает, как сгруппировать объект массивов в новый массив массивов объектов на основе его индекса с помощью Javascript? Я совсем новичок в этом, поэтому я застрял здесь

Например, у меня есть этот объект:

{
  'first': [
    {
      name: 'jimmy',
      text: 'I love you'
    },
    {
      name: 'jimmy',
      text: 'I miss you!'
    },
    {
      name: 'jimmy',
      text: 'I hate you!'
    }
  ],
  'second': [
    {
      name: 'jeremy',
      text: 'Wow'
    }
  ],
  'third': [
    {
      name: 'john',
      text: 'You ugly'
    },
    {
      name: 'john',
      text: 'You handsome'
    },
    {
      name: 'john',
      text: 'you beautiful'
    }
  ],
 'fourth': [
    {
      name: 'tom',
      text: 'this is cool!'
    },
    {
      name: 'tom',
      text: 'this is hard'
    }
  ]
}

который я хочу преобразовать во что-то вроде:

[
  [
    {
      name: 'jimmy',
      text: 'I love you'
    },
    {
      name: 'jeremy',
      text: 'Wow'
    },
    {
      name: 'john',
      text: 'You ugly'
    },
    {
      name: 'tom',
      text: 'this is cool!'
    },
  ],
  [
    {
      name: 'jimmy',
      text: 'I miss you!'
    },
    {
      name: 'john',
      text: 'You handsome'
    },
    {
      name: 'tom',
      text: 'this is hard'
    }
  ],
  [
    {
      name: 'jimmy',
      text: 'I hate you!'
    },
    {
      name: 'john',
      text: 'you beautiful'
    }
  ]
]

поэтому «первый» [1], «второй» [1], «третий» [1], «четвертый» [1] должен группироваться в первый массив как массив объектов и «первый» [2], «второй» [ 2], 'третий'[2], 'четвертый'[2] должны идти во второй массив как массив объектов и так далее..

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
37
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Для этого вы можете использовать reduce().

const input = {
  first: [
    {
      name: "jimmy",
      text: "I love you",
    },
    {
      name: "jimmy",
      text: "I miss you!",
    },
    {
      name: "jimmy",
      text: "I hate you!",
    },
  ],
  second: [
    {
      name: "jeremy",
      text: "Wow",
    },
  ],
  third: [
    {
      name: "john",
      text: "You ugly",
    },
    {
      name: "john",
      text: "You handsome",
    },
    {
      name: "john",
      text: "you beautiful",
    },
  ],
  fourth: [
    {
      name: "tom",
      text: "this is cool!",
    },
    {
      name: "tom",
      text: "this is hard",
    },
  ],
};

const output = Object.values(input).reduce(
  (all, cur) => (
    cur.forEach((item, idx) =>
      idx < all.length ? all[idx].push(item) : (all[idx] = [item])
    ),
    all
  ),
  []
);
console.info(output);
.as-console-wrapper { max-height: 100% !important; top: 0; }

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

Затем идея состоит в том, чтобы начать с пустого массива all (второй аргумент reduce()), а затем перебрать input.

Затем для каждого элемента cur мы перебираем все items этого элемента и для каждого из этих items проверяем, есть ли уже индекс этого элемента (idx) в массиве all.

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

Ответ принят как подходящий

отвечатьГрибник, вероятно, является наиболее кратким способом сделать это.

Если вы новичок в JavaScript, функциональном программировании или программировании в целом, я думаю, что следующий подход является достойным подходом для начального уровня, который может быть легче понять.

Основная логика та же самая, только шаги стали более явными/более очевидными.

  1. Создайте массив output, который будет содержать результат.
  2. Получите массивы first, second, third и fourth из data с помощью Object.values().
  3. Для каждого из массивов из шага 2 переберите их элементы, используя цикл for.
  4. Если у output еще нет вложенного массива для текущего индекса, создайте его.
  5. Array#push() элемент в текущем массиве по текущему индексу в массив по текущему индексу в output.

const data = {
  first:[{name:"jimmy",text:"I love you"},{name:"jimmy",text:"I miss you!"},{name:"jimmy",text:"I hate you!"}],
  second:[{name:"jeremy",text:"Wow"}],
  third:[{name:"john",text:"You ugly"},{name:"john",text:"You handsome"},{name:"john",text:"you beautiful"}],
  fourth:[{name:"tom",text:"this is cool!"},{name:"tom",text:"this is hard"}]
};

const output = [];
for (let arr of Object.values(data)) {
  for (let i = 0; i < arr.length; i++) {
    if (output[i] === undefined) {
      output[i] = [];
    }
    output[i].push(arr[i]);
  }
}

console.info(output);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Я новичок в JavaScript, и мне это очень легко понять.. спасибо

Jonolono99 05.05.2022 18:15

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

let obj = {'first': [{name: 'jimmy',text: 'I love you'},{name: 'jimmy',text: 'I miss you!'},{name: 'jimmy',text: 'I hate you!'}],'second': [{name: 'jeremy',text: 'Wow'}],'third': [{name: 'john',text: 'You ugly'},{name: 'john',text: 'You handsome'},{name: 'john',text: 'you beautiful'}],'fourth': [{name: 'tom',text: 'this is cool!'},{name: 'tom',text: 'this is hard'}]};

let arr = Object.values(obj),
    result = [];
while ((arr = arr.filter(sub => sub.length)).length) {
    result.push(arr.map(sub => sub.shift()));
}
console.info(result);

Другие вопросы по теме