Skip to content

JavaScript: Rebuild Array of Objects using Reduce

I have an array of objects that I’m trying to rebuild without any success:

const data = [
    {
        ID: 1,
        TemplateName: 'Template 1',
        TemplateCategory: 'Category A',
    }, 
    {
        ID: 2,
        TemplateName: 'Template 2',
        TemplateCategory: 'Category A',
    }, 
    {
        ID: 3,
        TemplateName: 'Template 3',
        TemplateCategory: 'Category B',
    }, 
]

I have the below code which produces the following undesired result:

    result = [...data
      .reduce((acc, {TemplateCategory, TemplateName, ID}) => {
          const group = acc.get(TemplateCategory)
          group ? group.options.push(ID, TemplateName) : acc.set(TemplateCategory, {TemplateCategory, "options":[ID, TemplateName]})
          return acc
        }, new Map)
      .values()
    ]

console.log(result) // undesired result:
[
    {
        TemplateCategory: 'Category A',
        options: [1, 'Template 1', 2, 'Template 2']
    },
    {
        TemplateCategory: 'Category B',
        options: [3, 'Template 3']
    }
]

I am stuck on trying to convert options to an Array of Objects with value and label as properties. Also im struggling trying to reword TemplateCategory property to label.

My desired result is:

[
    {
        label: 'Category A',
        options: [
            {
                value: 1,
                label: 'Template 1'
            },
            {
                value: 2,
                label: 'Template 2'
            }
        ]
    },
    {
        label: 'Category B',
        options: [
            {
                value: 3,
                label: 'Template 3'
            }
        ]
    }
]

TIA

Answer

Like this

const data = [
    {
        ID: 1,
        TemplateName: 'Template 1',
        TemplateCategory: 'Category A',
    }, 
    {
        ID: 2,
        TemplateName: 'Template 2',
        TemplateCategory: 'Category A',
    }, 
    {
        ID: 3,
        TemplateName: 'Template 3',
        TemplateCategory: 'Category B',
    }, 
]

const result = [...data
      .reduce((acc, {TemplateCategory, TemplateName, ID}) => {
          const group = acc.get(TemplateCategory)
          group ? group.options.push({value: ID, label: TemplateName}) : acc.set(TemplateCategory, {label: TemplateCategory, "options":[{value: ID, label: TemplateName}]})
          return acc
        }, new Map)
      .values()
    ]

console.log(result) // undesired result: