更改与 JavaScript 中的 Id 匹配的嵌套数组中的值

Question

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?

Answer 1

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"))

Answer 2

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)

Answer 3

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)