[英]How to update value of nested array of objects
這是我的實際數組:
let mainArray= [
{
value: '/AG_TURF-123',
label: 'Ag & Turf',
checked: false,
id:123,
children: [
{
value: '/AG_TURF-123/TRACTOR-456',
label: 'Tractors',
checked: false,
id:456,
children: [
{
value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series',
label: 'Large (7, 8, 9) Series',
checked: false,
id:789,
children: [{
value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/7-family-tractor',
label: '7 Family Tractor',
checked: false,
id:101112
},{
value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/8-family-tractor',
label: '8 Family Tractor',
checked: false,
id:131415
},{
value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/9-family-tractor',
label: '9 Family Tractor',
checked: false,
id:161718
}],
},
{
value: '/app/Http/routes.js',
label: 'routes.js',
checked: false,
id:181920
},
],
},
{
value: '/app/Providers',
label: 'Providers',
checked: false,
id:212223,
children: [{
value: '/app/Http/Providers/EventServiceProvider.js',
label: 'EventServiceProvider.js',
checked: false,
id:242526
}],
},
],
},
{
value: '/config',
label: 'config',
checked: false,
id:272829,
children: [
{
value: '/config/app.js',
label: 'app.js',
checked: false,
id:303132
},
{
value: '/config/database.js',
label: 'database.js',
checked: false,
id:333435
},
],
},
{
value: '/public',
label: 'public',
checked: false,
id:353637,
children: [
{
value: '/public/assets/',
label: 'assets',
checked: false,
id:383940,
children: [{
value: '/public/assets/style.css',
label: 'style.css',checked: false,
id:404142
}],
},
{
value: '/public/index.html',
label: 'index.html',
checked: false,
id: 434445
},
],
},
{
value: '/.env',
label: '.env',
checked: false,
id: 464748
},
{
value: '/.gitignore',
label: '.gitignore',
checked: false,
id: 495051
},
{
value: '/README.md',
label: 'README.md',
checked: false,
id: 525354
},
];
這是我的價值清單:
const ids=[525354,123,131415];
如果 id 匹配,我想將checked
設置為true
。 我的主陣可能會深入 6 到 7 步。
我迄今為止所做的:
setCheckedFlagToItems(checkList, items) {
return items.map((item) => {
const node = item;
if (checkList.indexOf(node.id) !== -1) {
node.checked = true;
}
if ((node.children) && (Array.isArray(node.children) && node.children.length > 0)) {
this.setCheckedFlagToItems(checkList, node.children);
}
return node;
}, this);
}
但它不像往常一樣工作。
您可以使用帶有命名函數的迭代和遞歸方法作為Array#forEach
回調。
let mainArray = [{ value: '/AG_TURF-123', label: 'Ag & Turf', checked: false, id: 123, children: [{ value: '/AG_TURF-123/TRACTOR-456', label: 'Tractors', checked: false, id: 456, children: [{ value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series', label: 'Large (7, 8, 9) Series', checked: false, id: 789, children: [{ value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/7-family-tractor', label: '7 Family Tractor', checked: false, id: 101112 }, { value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/8-family-tractor', label: '8 Family Tractor', checked: false, id: 131415 }, { value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/9-family-tractor', label: '9 Family Tractor', checked: false, id: 161718 }] }, { value: '/app/Http/routes.js', label: 'routes.js', checked: false, id: 181920 }] }, { value: '/app/Providers', label: 'Providers', checked: false, id: 212223, children: [{ value: '/app/Http/Providers/EventServiceProvider.js', label: 'EventServiceProvider.js', checked: false, id: 242526 }] }] }, { value: '/config', label: 'config', checked: false, id: 272829, children: [{ value: '/config/app.js', label: 'app.js', checked: false, id: 303132 }, { value: '/config/database.js', label: 'database.js', checked: false, id: 333435 }] }, { value: '/public', label: 'public', checked: false, id: 353637, children: [{ value: '/public/assets/', label: 'assets', checked: false, id: 383940, children: [{ value: '/public/assets/style.css', label: 'style.css', checked: false, id: 404142 }] }, { value: '/public/index.html', label: 'index.html', checked: false, id: 434445 }] }, { value: '/.env', label: '.env', checked: false, id: 464748 }, { value: '/.gitignore', label: '.gitignore', checked: false, id: 495051 }, { value: '/README.md', label: 'README.md', checked: false, id: 525354 }], ids = [525354, 123, 131415]; mainArray.forEach(function iter(a) { if (ids.includes(a.id)) { a.checked = true; } Array.isArray( a.children) && a.children.forEach(iter); }); console.log(mainArray);
.as-console-wrapper { max-height: 100% !important; top: 0; }
如果您的id
是“唯一的”(每個id
屬性只有一個唯一對象),您還可以將此操作分為兩個步驟:
id: item
對象id: item
ids
以從此對象中檢索項目。 如果您發現自己通過id
查找許多對象,則創建此臨時表示可能會更容易。
地圖的創建使用類似於其他答案的遞歸:每當item
包含children
數組時,它會在返回之前將這些添加到地圖對象。
const mainArray = [{ value: '/AG_TURF-123', label: 'Ag & Turf', checked: false, id: 123, children: [{ value: '/AG_TURF-123/TRACTOR-456', label: 'Tractors', checked: false, id: 456, children: [{ value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series', label: 'Large (7, 8, 9) Series', checked: false, id: 789, children: [{ value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/7-family-tractor', label: '7 Family Tractor', checked: false, id: 101112 }, { value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/8-family-tractor', label: '8 Family Tractor', checked: false, id: 131415 }, { value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/9-family-tractor', label: '9 Family Tractor', checked: false, id: 161718 }] }, { value: '/app/Http/routes.js', label: 'routes.js', checked: false, id: 181920 }] }, { value: '/app/Providers', label: 'Providers', checked: false, id: 212223, children: [{ value: '/app/Http/Providers/EventServiceProvider.js', label: 'EventServiceProvider.js', checked: false, id: 242526 }] }] }, { value: '/config', label: 'config', checked: false, id: 272829, children: [{ value: '/config/app.js', label: 'app.js', checked: false, id: 303132 }, { value: '/config/database.js', label: 'database.js', checked: false, id: 333435 }] }, { value: '/public', label: 'public', checked: false, id: 353637, children: [{ value: '/public/assets/', label: 'assets', checked: false, id: 383940, children: [{ value: '/public/assets/style.css', label: 'style.css', checked: false, id: 404142 }] }, { value: '/public/index.html', label: 'index.html', checked: false, id: 434445 }] }, { value: '/.env', label: '.env', checked: false, id: 464748 }, { value: '/.gitignore', label: '.gitignore', checked: false, id: 495051 }, { value: '/README.md', label: 'README.md', checked: false, id: 525354 }]; // We reduce the array of nested items in to one object of: // { id: item } const idMap = mainArray.reduce(function merge(map, node) { map[node.id] = node; if (Array.isArray(node.children)) { node.children.reduce(merge, map); } return map; }, {}); const ids = [525354, 123, 131415]; // Whenever you need an item, you can get it // using idMap[id] const items = ids.map(id => idMap[id]); items.forEach(item => item.checked = true); // or: ids.forEach(id => idMap[id].checked = true)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.