JavaScript: Rebuild Array of Objects using Reduce

November 26, 2021

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

>Solution :

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: