Фильтрация массива объектов 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'
  }
]

Я хотел бы уменьшить массив объектов widgets до нового массива объектов filteredWidgets на основе значений в массиве permissions объектов, будь то 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('filteredWidgets\n', 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

У меня есть решение, использующее уменьшение

Но сначала вы должны создать Карту и использовать ее для создания Объекта с Object.fromEntries(), а затем, наконец, использовать уменьшение.

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

Answer 4

Вы можете взять объект с разрешенными идентификаторами и фильтровать по 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; }