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

CodePudding user response：

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:

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>