Как правильно преобразовать данные (массивы)?

Question

[dc65k]

Всем привет, у меня есть задача преобразовать данные.
Исходный массив:

const data = [
    {
        type: 'Question',
        data: {
            title: 'Question1 title',
            subTitle: 'Question1 subTitle'
        }
    },
    {
        type: 'Question',
        data: {
            title: 'Question2 title',
            subTitle: 'Question2 subTitle'
        }
    },
    {
        type: 'SectionHeader',
        data: {
            title: 'title1'
        }
    },
    {
        type: 'W',
        data: {
            title: 'W1 title',
            subTitle: 'W1 subTitle'
        },
        properties: {
            isExpanded: true
        }
    },
    {
        type: 'W',
        data: {
            title: 'W2 title',
            subTitle: 'W2 subTitle'
        }
    },
    {
        type: 'SectionHeader',
        data: {
            title: 'title2'
        }
    }
]

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

[
    {
        type: 'SectionQuestion',
        children: [
            {
                data: {
                    title: 'title',
                    subTitle: 'subTitle'
                }
            },
            {
                data: {
                    title: 'title',
                    subTitle: 'subTitle'
                }
            }
        ]
    },
    {
        type: 'SectionHeader',
        data: {
            title: 'title1'
        }
    },
    {
        type: 'SectionW',
        children: [
            {
                data: {
                    title: 'W1 title',
                    subTitle: 'W1 subTitle'
                },
                properties: {
                    isExpanded: true
                }
            },
            {
                data: {
                    title: 'W2 title',
                    subTitle: 'W2 subTitle'
                }
            }
        ]
    },
    {
        type: 'SectionHeader',
        data: {
            title: 'title2'
        }
    }
]

Моё решение:

const arrType = ['Question', 'W']

function f(arr, arrType) {

    let res = []

    let isPush = true

    let widgetData = {
        type: '',
        children: []
    }

    arr.forEach(item => {

        let { type } = item

        if (arrType.includes(type)) {

            widgetData.type = `Section${type}`

            widgetData.children.push({
                data: item.data,
                properties: item.properties
            })

            if (isPush) {
                res.push(widgetData)
                isPush = false
            }

        } else {

            res.push(item)

            widgetData = {
                type: '',
                children: []
            }

            isPush = true

        }

    })

    return res

}

console.log(f(data, arrType))

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

Comments

[Сергей Сергей]

Коллекция типов arrType сформирована заранее, можно набирать в цикле обхода данных.
Имена типов в этой коллекции ещё и дописывать надо с каким-то правилом на "Section" в начале, тут предварительная обработка нужна.
В целом, задачу на распределение данных по какому-то полю здесь многократно решали. И нынче модно делать через reduce().

Answer 1

[Дмитрий]

const transform = data => {
  const res = data.reduce((agg, item) => {
    item = {...item}
    if (agg[agg.length - 1]?.type !== item.type) 
      agg.push({ type: item.type, children: [] })
    
    agg[agg.length - 1].children.push((delete item.type, item))
    return agg
  })

  res.filter(v => !v.type.startsWith('Section')).forEach(v => {
    v.type = 'Section' + v.type
  })

  return res
}

Answer 2

[0xD34F]

const newData = data
  .reduce((acc, { type, ...n }) => (
    (acc[acc.length - 1]?.[0] !== type) && acc.push([ type, [] ]),
    acc[acc.length - 1][1].push(n),
    acc
  ), [])
  .map(([ type, children ]) => children.length > 1
    ? { type: `Section${type}`, children }
    : { type, ...children[0] }
  );

Answer 3

[Антон Шаманов]

используй значения по умолчанию function f(arr, arrType = ['Question', 'W']) и проверяй типы аргументов или хотя бы их наличие: arrType = arrType || [];

если уж взялся писать модерновый js, то используй его по полной - создай класс widgetData с конструктором и геттерами/сеттерами свойств

вместо includes используй indexOf т.к. это этот метод не поддерживается ie