Update Nested Array Object passed from Parent to Child in LWC

Question

I have the below array which is being passed from other component.

var myArray = [
    {
        "Sequence": 1,
        "Value": 1,
        "sections": [
            {
                "Name": "Section 1",
                "Configurations": [
                    {
                        "Number": 1,
                        "Value": "Fruit"
                    },
                    {
                        "Number": 2,
                        "Value": "Vegetable"
                    }
                ],
                "Cost": {
                    "Currency": "INR"
                }
            }
        ]
    }
]

I want to loop through this array and add "isFruit" = true if "Value": "Fruit" and "isVegetable" = true if "Value": "Vegetable".

So the Expected Output is as below.

var myArray = [
    {
        "Sequence": 1,
        "Value": 1,
        "sections": [
            {
                "Name": "Section 1",
                "Configurations": [
                    {
                        "Number": 1,
                        "Value": "Fruit",
                        "isFruit": true
                    },
                    {
                        "Number": 2,
                        "Value": "Vegetable"
                        "isVegetable": true
                    }
                ],
                "Cost": {
                    "Currency": "INR"
                }
            }
        ]
    }
]

Seems the object is ready only and when I try as below it doesn't work. Tried with Spread Syntax but it goes only till 1 level and nested objects are still read only.

Someone please let me know how can I achieve the expected Output array.

Answer 1

As long as you have no circular or self references in your JSON, you can simply stringify and then parse the array to get a mutable version.

let mutableJSON = JSON.parse(JSON.stringify(jsonFromParent));

I tried a lot of other techniques to avoid this, as it seems pretty clumsy but it works well.

You can also try Object.assign but you do need to know if you have array or an object for this one.

const newArray = Object.assign([], jsonArrayFromParent);