How to update deeply nested array of objects JavaScript-CodePudding

I have the following Array of object using this information I want to update array of object with value:a without mutating it directly (I am able to solve it using index but I don't want to update it using index) below is the code that I have tried so far

ccategory.map((item) =>
          item.id === payload.id
            ? {
                ...item,
                categoryItems: item.categoryItems.map(
                  (catItem) => catItem.categoryItemID === payload.categoryItemID
// stuck here how should I update categorySubItems?
                ),
              }
            : item
        ),

const payload={
    "id": "4476c379-2c4f-4454-b59e-cae2f62fdfe2",
    "categorySubItemsID": "c2cba4d6-5635-4b5c-acf3-b93b4d435aa9",
    "categoryItemID": "fdb0e86b-a2d9-4029-8988-9f50121794d3",
    "value": "a"
}

MyJSON looks like this

const category=[
    {
        "id": "4476c379-2c4f-4454-b59e-cae2f62fdfe2",
        "categoryName": "Car",
        "categoryFields": [
            {
                "name": "Car Name",
                "type": "text",
                "categoryID": "e9da78fb-d349-4b03-9b77-e3cc0dc57d25"
            },
            {
                "name": "Price",
                "type": "number",
                "categoryID": "c9e147a6-b5d1-424b-99bf-a973ce189322"
            }
        ],
        "categoryItems": [
            {
                "categoryItemID": "fdb0e86b-a2d9-4029-8988-9f50121794d3",
                "categorySubItems": [
                    {
                        "categorySubItemsID": "c2cba4d6-5635-4b5c-acf3-b93b4d435aa9",
                        "value": "",
                        "label": "Car Name",
                        "type": "text",
                        "categoryLinkID": "e9da78fb-d349-4b03-9b77-e3cc0dc57d25"
                    },
                    {
                        "categorySubItemsID": "01d5e1e7-3927-42a6-ad05-7399a5895096",
                        "value": "",
                        "label": "Price",
                        "type": "number",
                        "categoryLinkID": "c9e147a6-b5d1-424b-99bf-a973ce189322"
                    }
                ]
            },
            {
                "categoryItemID": "f13237d7-abfd-40d3-ae35-0b59ddf5734e",
                "categorySubItems": [
                    {
                        "categorySubItemsID": "2af389b9-03bc-41d3-86bb-8bf324ca3cb3",
                        "value": "",
                        "label": "Car Name",
                        "type": "text",
                        "categoryLinkID": "e9da78fb-d349-4b03-9b77-e3cc0dc57d25"
                    },
                    {
                        "categorySubItemsID": "934ef505-72bb-4d64-adf1-2aa5e928a539",
                        "value": "",
                        "label": "Price",
                        "type": "number",
                        "categoryLinkID": "c9e147a6-b5d1-424b-99bf-a973ce189322"
                    }
                ]
            }
        ]
    },
    {
        "id": "9882b210-2d99-43a3-8aea-9f7d7c88eeda",
        "categoryName": "Bike",
        "categoryFields": [
            {
                "name": "Bike Name",
                "type": "text",
                "categoryID": "73bee24c-ef64-4798-bc37-5fe90cbc8de7"
            }
        ],
        "categoryItems": []
    }
]

CodePudding user response：

In your inner .map(), if catItem.categoryItemID === payload.categoryItemID matches, you can return a new object that has an updated categorySubItems, which you can update by creating a new array by mapping catItem.categorySubItems. When mapping the sub category items, if your categorySubItemsID matches the one from the payload object, you can return a new updated object with a new value set to that of payload.value, otherwise, you can keep the original item, eg:

ccategory.map((item) =>
  item.id === payload.id
    ? {
      ...item,
      categoryItems: item.categoryItems.map((catItem) =>
        catItem.categoryItemID === payload.categoryItemID
          ? {
            ...catItem, 
            categorySubItems: catItem.categorySubItems.map(subCatItem => 
              subCatItem.categorySubItemsID === payload.categorySubItemsID
                ? {...subCatItem, value: payload.value}
                : subCatItem
            )
          }
          : catItem
      ),
    }
    : item
),

As you can see, this can get quite unwieldy. That's why it's often useful to use something like useImmer(), which allows you to directly modify a "draft" state value in an immutable way while keeping your state updates mutable.