Группировать элементы с одинаковым значением в массиве

Question

У меня есть массив объектов, например

const data = [
 {color: "green", number: 23}, 
 {color: "red", number: 25}, 
 {color: "green", number: 27}, 
 {color: "green", number: 26}, 
 {color: "orange", number: 30}
];

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

green
red
green (2)
orange

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

Answer 1

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

Ваши исходные данные

const data = [
 {color: "green", number: 23}, 
 {color: "red", number: 25}, 
 {color: "green", number: 27}, 
 {color: "green", number: 26}, 
 {color: "orange", number: 30}
];

Давайте инициализируем наши переменные ...

let previousItemColor = false;
let newData = [];

Просмотрите наши исходные данные ...

data.map((item, index) => {
    // Does our last iteration was about the same color ? ?

    // Yes ! ✨
    if (item.color === previousItemColor) {
        // Remove the last entry from newData and store it in lastItem
        let lastItem = newData.pop();
        // Append the new item into lastItem elements property
        lastItem.elements.push(item)
        // Push that modified entry into newData array
        newData.push(lastItem);
    }

    // Oh! That's a new entry ?
    else {
        let newEntry = {
            groupName: item.color,
            elements: [item]
        };
        newData.push(newEntry);
    }

    // Don't forget, we need to store that color into peviousItemColor, so our script know what was the last iteration.
    previousItemColor = item.color;
});

Давайте проверим, на правильном ли мы пути ...

console.log(newData);

Ожидаемые результаты:

data = [
    {groupName: "green", elements: [{color: green, number: 23}]},
    {groupName: "red", elements: [{color: red, number: 25}]},
    {groupName: "green", elements: [{color: green, number: 27}, {color: green, number: 26}]},
    {groupName: "orange", elements: [{color: orange, number: 30}]}
];

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

newData.map((item, index) => {
        console.log(`${item.groupName} ${(item.elements.length > 1 ? item.elements.length : '')}`);
});

Ожидаемые результаты:

green
red
green 2
orange

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

P.S. Я знаю, что есть другой способ приблизиться к этому, но, поскольку О.П. выглядит довольно новым, давайте сделаем это длинным путем, чтобы он / она понял весь процесс.