Фильтр рекурсивного массива

Я пытаюсь найти лучший способ (минимальный код) для фильтрации рекурсивного списка элементов на основе некоторого условия. Список описывает некоторую навигацию, которая содержит несколько разделов, и каждый раздел содержит элементы навигации (где каждый элемент навигации может содержать рекурсивное количество элементов навигации).

Пример:

const navSections = [{
    title: 'Section A',
    items: [
        {
            title: 'A1',
            permission: 'Moderator'
        },
        {
            title: 'A2',
            permission: 'Moderator',
            items: [{
                title: 'A21',
                permission: 'Admin'
            },
            {
                title: 'A22',
                permission: 'Admin'
            }]
        }]
},
{
    title: 'Section B',
    items: [
        {
            title: 'B1',
            permission: 'User'
        },
        {
            title: 'B2',
            permission: 'User'
        },
        {
            title: 'B3',
            permission: 'Admin'
        }]
}]

У пользователя есть массив разрешений, и я хочу отфильтровать все элементы, которых нет в наборе разрешений пользователя.

const userPermissions = ['Moderator', 'User']

Я не ищу решение, которое просто перебирает элементы; Я могу закодировать это сам.

Не следует ли нам называть это «вложенным», а не «рекурсивным»? Я не пытаюсь умничать - искренний вопрос. :)

Nicolas Goosen 17.05.2022 17:28

Что касается вашего последнего предложения: значит, вы ищете «функциональный» стиль, а не «итеративный»...

Nicolas Goosen 17.05.2022 17:30

Да, точно! Если бы мне пришлось угадывать, вероятно, есть изящное решение с использованием .reduce @NicolasGoosen.

Tom el Safadi 17.05.2022 17:31

Посмотрите эти ответы: stackoverflow.com/questions/38375646/…

Nicolas Goosen 17.05.2022 17:31
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
2
4
39
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проверь это:

const navSections = [{title: 'Section A',items: [{title: 'A1',permission: 'Moderator',},{title: 'A2',permission: 'Moderator',items: [{title: 'A21',permission: 'Admin',},{title: 'A22',permission: 'Admin',}]}]},{title: 'Section B',items: [{title: 'B1',permission: 'User',},{title: 'B2',permission: 'User',},{title: 'B3',permission: 'Admin',}]}]

const userPermissions = ['Moderator', 'User']

const navSectionsByPermissions = (arr, permissions, isBase = true) =>
  arr.filter(o => {
    if (o.items) {
      o.items = navSectionsByPermissions(o.items, permissions, false)
    }
    return o.permission && permissions.includes(o.permission) || isBase
  })
  
const result = navSectionsByPermissions(navSections, userPermissions)

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

Большой! Это решение, которое я искал. Спасибо

Tom el Safadi 17.05.2022 18:06

Другие вопросы по теме