更改属性值的最佳方式。它位于对象数组的对象内

Question

当用户单击复选框时，我试图将selected的值从当前的值(true或false)切换到相反的值。我的toggleCheck函数应该返回具有改变的选择值的所有数据。这是数据结构。它是一个带有数组的对象。

{
"ModuleName": [{
"module": "string",
"selected": false,
"name": "title",
"points": [{
"category": "category1",
"description": "desc1",
"provided": "provided1"
},
{
"category": "category1",
"description": "desc",
"provided": "something"
}
]
},
{
"module": "string",
"selected": false,
"name": "title_one",
"points": [{
"category": "category1",
"description": "desc1",
"provided": "provided1"
},
{
"category": "category1",
"description": "desc",
"provided": "something"
}
]
}
],
[...],
[...]
}

我最接近的尝试，但格式错误

function toggleCheck(checkedValue, valuesArr) {
return {
value: Object.entries(valuesArr).map(([key, values], i) =>
values.map((x) => {
return {
...x,
selected:
x.name === checkedValue.name ? !x.selected : x.selected,
};
})
),
};
}

可能是因为我使用了映射它被封装在数组中

[
[ 
{},
{},
{}
],
[...],
[...]
]

^^^ What I got

{
"Name": [  {},
{},
{}
],
"Name": [...],
"Name": [...]
}

^^^我需要什么

Answer 1

function toggleCheck(checkedValue, valuesArr) {
//Step 0: Change the value in the data
let checked = Object.entries(valuesArr).map(([key, values], i) =>
values.map((x) => {
return {
...x,
selected:
x.name === checkedValue.name ? !x.selected : x.selected,
};
})
);
//Step 1: Group the modules into like arrays
let grouped = checked .flat().reduce(function (r, a, i) {
if (!i || r[r.length - 1][0].module !== a.module) {
return r.concat([[a]]);
}
r[r.length - 1].push(a);
return r;
}, []);
//Step 2: Assign the new object properties as the arrays. 
//The key being the module name.
let newObj = {};
grouped.map((x, i) => {
newObj[x[0].module] = x;
});
return {value: newObj};
}

Answer 2

在你的问题中你写道:

{
"Name": [  {},
{},
{}
],
"Name": [...],
"Name": [...]
}

^^^我需要的

---

这不能存在于JS对象中。只有name属性的最后一次赋值会被考虑，所有之前的赋值都只是这个属性的旧值

鳕鱼:

const data = 
{ name:'aaa'
, name:'bbb'
, name:'ccc' 
}

与编码

相同

const data = {}
data.name = 'aaa'
data.name = 'bbb'
data.name = 'ccc'

证明:

const data = 
{ name:'aaa'
, name:'bbb'
, name:'ccc' 
}
console.log( data )

.as-console-wrapper {max-height: 100% !important;top: 0;}
.as-console-row::after {display: none !important;}