I have a nested array object which is like:

const nestedArray = [
    { name : 'Living room',
      item : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145571e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]
        
    },
    { name: 'Kitchen',
      item :
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53cbb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-cdbd91aa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145vdf571e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]
        
    },
    { name : 'Master bedroom',
      item  : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad5xx3abb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbdss91aa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145571eaa29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]
        
    },
    { name : 'Kids bedroom',
      item  : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53abbkk28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbd91kkaa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-14557331e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]
        
    },

];

Now i will pass an Id in a function and need to match the Id from the array and change the value of selected to true or false. Here's what i have done so far:

    const onPressHandler = (id) => {
        let updateBool = nestedArray.map((x) =>{
           x.item.id === id ? { ...x, selected: !selected } : x
        })
    }

but it doesn't change anything from the original array. What am i doing wrong here?

CodePudding user response：

If you're only making a small change it seems a little redundant to create a new array for nestedArray and new arrays for each item.

Just loop over the data and change that one selected where the id matches, and then you can just break out of the loop - job done. That would be much faster because find also short-circuits its own iteration if it finds a match.

If you didn't want to mutate the original array just make a copy of it in the function, change and return that instead. Still a lot more performant.

const nestedArray=[{name:"Living room",item:[{id:"bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",title:"Light",titleStatus:"Home Daytime",selected:!1},{id:"3ac68afc-c605-48d3-a4f8-fbd91aa97f63",title:"Climate",titleStatus:"17",selected:!1},{id:"58694a0f-3da1-471f-bd96-145571e29d72",title:"Ventilation",titleStatus:"Auto",selected:!1}]},{name:"Kitchen",item:[{id:"bd7acbea-c1b1-46c2-aed5-3ad53cbb28ba",title:"Light",titleStatus:"Home Daytime",selected:!1},{id:"3ac68afc-c605-48d3-a4f8-cdbd91aa97f63",title:"Climate",titleStatus:"17",selected:!1},{id:"58694a0f-3da1-471f-bd96-145vdf571e29d72",title:"Ventilation",titleStatus:"Auto",selected:!1}]},{name:"Master bedroom",item:[{id:"bd7acbea-c1b1-46c2-aed5-3ad5xx3abb28ba",title:"Light",titleStatus:"Home Daytime",selected:!1},{id:"3ac68afc-c605-48d3-a4f8-fbdss91aa97f63",title:"Climate",titleStatus:"17",selected:!1},{id:"58694a0f-3da1-471f-bd96-145571eaa29d72",title:"Ventilation",titleStatus:"Auto",selected:!1}]},{name:"Kids bedroom",item:[{id:"bd7acbea-c1b1-46c2-aed5-3ad53abbkk28ba",title:"Light",titleStatus:"Home Daytime",selected:!1},{id:"3ac68afc-c605-48d3-a4f8-fbd91kkaa97f63",title:"Climate",titleStatus:"17",selected:!1},{id:"58694a0f-3da1-471f-bd96-14557331e29d72",title:"Ventilation",titleStatus:"Auto",selected:!1}]}];

function changeSelected(id) {
  for (const { item } of nestedArray) {
    const found = item.find(obj => obj.id === id);
    if (found) {
      found.selected = !found.selected;
      break;
    }
  }
}

changeSelected('bd7acbea-c1b1-46c2-aed5-3ad53abbkk28ba');

console.log(nestedArray);

CodePudding user response：

You need to nest the map method to the item list, also selected: !selected will give an error, you need to set selected: !i.selected as i is the item.

const nestedArray = [
    { name : 'Living room',
      item : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
                title: "Climate",
                titleStatus: '17',
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145571e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                selected: false
            }
        ]
        
    },
    { name: 'Kitchen',
      item :
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53cbb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-cdbd91aa97f63",
                title: "Climate",
                titleStatus: '17',
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145vdf571e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                selected: false
            }
        ]
        
    },
    { name : 'Master bedroom',
      item  : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad5xx3abb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbdss91aa97f63",
                title: "Climate",
                titleStatus: '17',
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145571eaa29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                selected: false
            }
        ]
        
    },
    { name : 'Kids bedroom',
      item  : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53abbkk28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbd91kkaa97f63",
                title: "Climate",
                titleStatus: '17',
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-14557331e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                selected: false
            }
        ]
        
    },

];


const onPressHandler = (id) => {
        let updateBool = nestedArray.map((x) =>{
           return x.item.map(i => {
             return i.id === id ? { ...i, selected: !i.selected } : i
           })
        })
        
        return updateBool
    }
    
console.log(onPressHandler("58694a0f-3da1-471f-bd96-14557331e29d72"))

CodePudding user response：

I definied Image as {} to prevent error as I don't have the entier code :

const Images = {};

const nestedArray = [
    { name : 'Living room',
      item : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145571e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]
        
    },
    { name: 'Kitchen',
      item :
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53cbb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-cdbd91aa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145vdf571e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]
        
    },
    { name : 'Master bedroom',
      item  : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad5xx3abb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbdss91aa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145571eaa29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]
        
    },
    { name : 'Kids bedroom',
      item  : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53abbkk28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbd91kkaa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-14557331e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]
        
    },

];

const onPressHandler = (id) => {
    return nestedArray.map(x => 
        ({...x, item: x.item.map(item => 
            item.id === id ? {...item, selected: !item.selected} : item)
        }) 
    );
};

const id = "58694a0f-3da1-471f-bd96-14557331e29d72";
let result = onPressHandler(id);
console.log(result);