How to map values from nested Typescript object to properties of JSON object

Question

In a project that I'm working on, we're using the Angular library called formly to create our forms dynamically.

Currently, the form configuration is hardcoded as a Typescript object called mockForm. All of the properties in mockForm are hardcoded besides the options property in objects whose type property equals 'select':

mockForm

export const mockForm = {
    name: 'root',
    subSections: [
        {
            name: 'Client',
            subSections: [
                {
                    name: 'Contact Information'
                },
                {
                    name: 'Insurance Information'
                }
            ]
        },
        {
            name: 'Sales',
            subSections: [
                {
                    name: 'Overview',
                    subSections: [
                        {
                            name: 'Overview - A',
                            fields: [
                                {
                                    key: 'fieldA1',
                                    type: 'input',
                                    templateOptions: {
                                        label: 'A1',
                                        required: true
                                    }
                                },
                                {
                                    key: 'fieldA2',
                                    type: 'select',
                                    templateOptions: {
                                        label: 'A2',
                                        required: true,
                                        options: []
                                    }
                                }
                            ]
                        },
                        {
                            name: 'Overview - B',
                            fields: [
                                {
                                    key: 'fieldB1',
                                    type: 'input',
                                    templateOptions: {
                                        label: 'B1',
                                        required: false
                                    }
                                },
                                {
                                    key: 'fieldB2',
                                    type: 'select',
                                    templateOptions: {
                                        label: 'B2',
                                        required: false,
                                        options: []
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
};

I would like to populate the options property by using an API called which returns the following object:

API return

{
    "multi_value_fields": {
        "fieldA2": [
            "[email protected]",
            "[email protected]",
            "[email protected]",
            "[email protected]",
            "[email protected]",
            "[email protected]"
        ],
        "fieldB2": [
            "<3m",
            "<6m",
            "<9m",
            "<12m",
            "+12m",
            "N/A"
        ]
    }
}

The object returned from the API call returns a JSON whose properties are the key values from mockForm whose property type equals 'select'; and the values of these JSON properties represent the dropdown options of the form.

The intended outcome should be the following:

export const mockForm = {
    name: 'root',
    subSections: [
        {
            name: 'Client',
            subSections: [
                {
                    name: 'Contact Information'
                },
                {
                    name: 'Insurance Information'
                }
            ]
        },
        {
            name: 'Sales',
            subSections: [
                {
                    name: 'Overview',
                    subSections: [
                        {
                            name: 'Overview - A',
                            fields: [
                                {
                                    key: 'fieldA1',
                                    type: 'input',
                                    templateOptions: {
                                        label: 'A1',
                                        required: true
                                    }
                                },
                                {
                                    key: 'fieldA2',
                                    type: 'select',
                                    templateOptions: {
                                        label: 'A2',
                                        required: true,
                                        options: [
                                            "[email protected]",
                                            "[email protected]",
                                            "[email protected]",
                                            "[email protected]",
                                            "[email protected]",
                                            "[email protected]"
                                        ]
                                    }
                                }
                            ]
                        },
                        {
                            name: 'Overview - B',
                            fields: [
                                {
                                    key: 'fieldB1',
                                    type: 'input',
                                    templateOptions: {
                                        label: 'B1',
                                        required: false
                                    }
                                },
                                {
                                    key: 'fieldB2',
                                    type: 'select',
                                    templateOptions: {
                                        label: 'B2',
                                        required: false,
                                        options: [
                                            "<3m",
                                            "<6m",
                                            "<9m",
                                            "<12m",
                                            "+12m",
                                            "N/A"
                                        ]
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
};

I haven't experienced a scenario like this, and I'm not so sure on how to approach this (Should I start with the JSON properties and map back to mockForm? Would I need to manually iterate through mockForm in order to populate from the API call?)

You might be using TypeScript but this doesn't seem TypeScript-specific. Looks more like a JavaScript question to me. Maybe you should add the JavaScript tag? — jcalz
– jcalz, Commented Apr 20, 2021 at 14:27

Sanskar Dahiya · Accepted Answer · 2021-04-20 14:58:21Z

1

your JSON mockForm is very typical. If it remains the same then you must manually iterate over the bottom leaf i.e., mokeForm.subSections[1].subSections and then loop there to match the label & type.

Otherwise, you need to write parse which iterates all over mokeForm JSON & assign required options are respective places.

answered Apr 20, 2021 at 14:58

Sanskar Dahiya

3092 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to map values from nested Typescript object to properties of JSON object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related