Расширять объекты по определенным свойствам

У меня есть массив таких объектов, который выводится API отдыха, по сути, это подсчет сообщений за каждые 15 минут за каждый час для каждого идентификатора.

[
   [
       {id: 1, hour:0, interval_1: 2 ,interval_2: 1, interval_3: 3, interval_4: 0},
       {id: 1, hour:1, interval_1: 2 ,interval_2: 1, interval_3: 3, interval_4: 0},
       {id: 2, hour:0, interval_1: 5 ,interval_2: 1, interval_3: 3, interval_4: 3},
       {id: 2, hour:1, interval_1: 3 ,interval_2: 1, interval_3: 3, interval_4: 0}

   ]

]

Как преобразовать его в приведенный ниже массив с помощью JavaScript?

[
   [
       {id: 1, hour:0, interval_1: 2},
       {id: 1, hour:0, interval_2: 1},
       {id: 1, hour:0, interval_3: 3},
       {id: 1, hour:0, interval_4: 0},
       {id: 1, hour:1, interval_1: 2},
       {id: 1, hour:1, interval_2: 1},
       ...
       ...
   ]
]

Какова логика преобразования?

VLAZ 09.12.2020 22:08

что ты уже испробовал? SO на самом деле не ваша служба написания кода

Dominik 09.12.2020 22:08
Поведение ключевого слова "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
2
191
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете использовать Array#flatMap и остальные параметры для разделения свойств.

const arr = [
   [
       {id: 1, hour:0, interval_1: 2 ,interval_2: 1, interval_3: 3, interval_4: 0},
       {id: 1, hour:1, interval_1: 2 ,interval_2: 1, interval_3: 3, interval_4: 0},
       {id: 2, hour:0, interval_1: 5 ,interval_2: 1, interval_3: 3, interval_4: 3},
       {id: 2, hour:1, interval_1: 3 ,interval_2: 1, interval_3: 3, interval_4: 0}

   ]
];
const res = arr.map(x => x.flatMap(({id,hour,...rest})=>
    Object.keys(rest).map(k => ({id,hour,[k]:rest[k]}))));
console.info(res);
Ответ принят как подходящий

Вы можете разделить общие ключи и повторить остальные свойства для сопоставления.

const
    data = [{ id: 1, hour: 0, interval_1: 2, interval_2: 1, interval_3: 3, interval_4: 0 }, { id: 1, hour: 1, interval_1: 2, interval_2: 1, interval_3: 3, interval_4: 0 }, { id: 2, hour: 0, interval_1: 5, interval_2: 1, interval_3: 3, interval_4: 3 }, { id: 2, hour: 1, interval_1: 3, interval_2: 1, interval_3: 3, interval_4: 0 }],
    result = data.flatMap(({ id, hour, ...o }) =>
        Object.entries(o).map(([k, v]) => ({ id, hour, [k]: v }))
    );

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

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

Переберите его с помощью Array.prototype.map() и верните новый массив в первый map()

const arr = [
   [
       {id: 1, hour:0, interval_1: 2 ,interval_2: 1, interval_3: 3, interval_4: 0},
       {id: 1, hour:1, interval_1: 2 ,interval_2: 1, interval_3: 3, interval_4: 0},
       {id: 2, hour:0, interval_1: 5 ,interval_2: 1, interval_3: 3, interval_4: 3},
       {id: 2, hour:1, interval_1: 3 ,interval_2: 1, interval_3: 3, interval_4: 0}
   ]
]

const res = arr[0].map(({id, hour, ...rest}) => 
Object.entries(rest).map(([key, value]) => 
({ id, hour, [key]: value })));

console.info(res)

Предлагаемый подход flatMap() кажется наиболее разумным, однако он может работать медленнее (особенно в сочетании с Object.entries(), а не Object.keys()), чем reduce() для больших входных массивов, поэтому мое решение будет примерно таким:

const src= [{id:1,hour:0,interval_1:2,interval_2:1,interval_3:3,interval_4:0},{id:1,hour:1,interval_1:2,interval_2:1,interval_3:3,interval_4:0},{id:2,hour:0,interval_1:5,interval_2:1,interval_3:3,interval_4:3},{id:2,hour:1,interval_1:3,interval_2:1,interval_3:3,interval_4:0}],

      result = src.reduce((acc, {id, hour, ...intervals}) => {
        const entries = Object
                .keys(intervals)
                .map(key => 
                  ({id, hour, [key]: intervals[key]}))
        acc.push(...entries)
        return acc
      }, [])
      
console.info(result)
.as-console-wrapper{min-height:100%;}

Если ваш фактический входной массив состоит из нескольких массивов, таких как src в моем примере выше (что имело бы смысл), вы можете обернуть выше .reduce() функцией и применить это с .map() к каждому элементу входного массива.

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