过滤对象的JavaScript数组另一个对象的JavaScript阵列

Question

我有以下组成的JavaScript对象数组：

const permissions = [
{
moduleEnabled: true,
moduleId: 1,
moduleName: 'Directory'
},
{
moduleEnabled: true,
moduleId: 2,
moduleName: 'Time off'
},
{
moduleEnabled: false,
moduleId: 3,
moduleName: 'Tasks'
},
{
moduleEnabled: false,
moduleId: 4,
moduleName: 'Documents'
}
]

我还有以下基于可显示的小部件集合的对象数组：

const widgets = [
{
id: 1,
moduleId: 2,
title: 'Your time off'
},
{
id: 2,
moduleId: 1,
title: 'Your colleagues'
},
{
id: 3,
moduleId: 3,
title: 'Your tasks'
},
{
id: 4,
moduleId: 5,
title: 'Your sales pipeline'
},
{
id: 5,
moduleId: 4,
title: 'Your documents'
},
{
id: 6,
moduleId: 6,
title: 'Your legal cases'
}
]

我想做的是根据对象的permissions数组中的值，将对象的数组widgets缩减为新的对象数组filteredWidgets，这些值是是否找到了moduleId，以及moduleEnabled在哪里是true。

我试过下面的代码，但它不起作用：

const filteredWidgets = []
for (const permission in permissions) {
const found = widgets.filter((item) => item.moduleId === permission.moduleId && permission.moduleEnabled)
if (found) {
filteredWidgets.push(found)
}
}
console.log('filteredWidgetsn', filteredWidgets)

任何帮助都将不胜感激。提前谢谢。

编辑：包括预期输出：

const filteredWidgets = [
{
id: 1,
moduleId: 2,
title: 'Your time off'
},
{
id: 2,
moduleId: 1,
title: 'Your colleagues'
}
]

Answer 1

在过滤函数中，检查是否有任何符合给定条件的权限：

const filteredWidgets = widgets.filter(widget =>
permissions.find(permission =>
(permission.moduleId === widget.moduleId) && permission.moduleEnabled));

Answer 2

我认为.reduce()和.find()的组合可以为您工作：

const permissions = [{moduleEnabled: true, moduleId: 1, moduleName: 'Directory' }, { moduleEnabled: true, moduleId: 2,  moduleName: 'Time off' }, { moduleEnabled: false,  moduleId: 3, moduleName: 'Tasks' }, { moduleEnabled: false,  moduleId: 4, moduleName: 'Documents' }];
const widgets = [{ id: 1, moduleId: 2, title: 'Your time off' }, { id: 2, moduleId: 1, title: 'Your colleagues' }, { id: 3,  moduleId: 3, title: 'Your tasks' }, { id: 4, moduleId: 5, title: 'Your sales pipeline' }, { id: 5, moduleId: 4, title: 'Your documents' },{ id: 6, moduleId: 6, title: 'Your legal cases'}]
const result = widgets.reduce((a, c) => {
const found = permissions.find(e => e.moduleId === c.moduleId)
return found && found.moduleEnabled ? a.concat(c) : a;
}, []);
console.log(result);

我希望这能有所帮助！

Answer 3

您可以使用允许id的对象并通过moduleId进行筛选。

const
permissions = [{ moduleEnabled: true, moduleId: 1, moduleName: 'Directory' }, { moduleEnabled: true, moduleId: 2, moduleName: 'Time off' }, { moduleEnabled: false, moduleId: 3, moduleName: 'Tasks' }, { moduleEnabled: false, moduleId: 4, moduleName: 'Documents' }],
widgets = [{ id: 1, moduleId: 2, title: 'Your time off' }, { id: 2, moduleId: 1, title: 'Your colleagues' }, { id: 3, moduleId: 3, title: 'Your tasks' }, { id: 4, moduleId: 5, title: 'Your sales pipeline' }, { id: 5, moduleId: 4, title: 'Your documents' }, { id: 6, moduleId: 6, title: 'Your legal cases' }],
allowed = permissions.reduce((o, { moduleEnabled, moduleId }) =>
({ ...o, [moduleId]: moduleEnabled }), {}),
filteredWidgets = widgets.filter(({ moduleId }) => allowed[moduleId]);
console.log(filteredWidgets);

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

Answer 4

我有一个使用reduce 的解决方案

但首先，您必须创建一个Map并使用它来创建一个具有Object.fromEntries()的Object，然后最后使用reduce。

const permissions = [
{
moduleEnabled: true,
moduleId: 1,
moduleName: 'Directory'
},
{
moduleEnabled: true,
moduleId: 2,
moduleName: 'Time off'
},
{
moduleEnabled: false,
moduleId: 3,
moduleName: 'Tasks'
},
{
moduleEnabled: false,
moduleId: 4,
moduleName: 'Documents'
}
]
const widgets = [
{
id: 1,
moduleId: 2,
title: 'Your time off'
},
{
id: 2,
moduleId: 1,
title: 'Your colleagues'
},
{
id: 3,
moduleId: 3,
title: 'Your tasks'
},
{
id: 4,
moduleId: 5,
title: 'Your sales pipeline'
},
{
id: 5,
moduleId: 4,
title: 'Your documents'
},
{
id: 6,
moduleId: 6,
title: 'Your legal cases'
}
]
const permissonsMap = permissions.map((child,index) => {
return [child.moduleId, {...child}]
})
const permissionsObj = Object.fromEntries(permissonsMap);
//console.log(permissionsObj);
const filteredWidgets = widgets.reduce((aggArr,currItem) => {
if (permissionsObj[currItem.moduleId] && permissionsObj[currItem.moduleId].moduleEnabled){
aggArr.push(currItem);
}
return aggArr;
},[])
console.log(filteredWidgets);

重要线路有：

const permissonsMap = permissions.map((child,index) => {
return [child.moduleId, {...child}]
})
const permissionsObj = Object.fromEntries(permissonsMap);
//console.log(permissionsObj);
const filteredWidgets = widgets.reduce((aggArr,currItem) => {
if (permissionsObj[currItem.moduleId] && permissionsObj[currItem.moduleId].moduleEnabled){
aggArr.push(currItem);
}
return aggArr;
},[])
console.log(filteredWidgets);