Фильтр многоуровневых массивов для реализации поиска

Question

Я пытаюсь реализовать поиск по многоуровневому массиву.

Предположим, у меня есть JSON многоуровневый массив, как показано ниже

const testData = [
        {
            menu: 'Test',
            submenu: [
                {
                    menu: 'Test1',
                },
                {
                    menu: 'Test2',
                    submenu: [
                        {
                            menu: 'Test2.1',
                        },
                        {
                            menu: 'Test2.2',
                        },
                        {
                            menu: 'Test2.3',
                        },
                    ],
                },
            {
        menu: 'TestNew',
        submenu: [
            {
                menu: 'TestNew1.1',
            },
            {
                menu: 'TestNew1.2'
            },
            {
                menu: 'TestNew1.3',
            },
        ],
    },
            ],
        }]

У меня есть окно поиска, если я пытаюсь найти слово Test2.3 Мне бы хотелось, чтобы JSON был в формате ниже

const testData = [
        {
            menu: 'Test',
            submenu: [

                {
                    menu: 'Test2',
                    submenu: [
                        {
                            menu: 'Test2.3'
                        },
                    ],
                },
            ],
        }]

Я ссылался на ссылку Используя array.filter на несколько уровней , но он не соответствует моим выводам , возвращает все подменю, как показано ниже

const testData = [
        {
            menu: 'Test',
            submenu: [
                {
                    menu: 'Test1',
                },
                {
                    menu: 'Test2',
                    submenu: [
                        {
                            menu: 'Test2.1',
                        },
                        {
                            menu: 'Test2.2',
                        },
                        {
                            menu: 'Test2.3',
                        },
                    ],
                },
            ],
        }]

Есть ли у нас какой-либо другой способ, чтобы оправдать мои ожидания. Заранее спасибо

Answer 1

Вы можете использовать рекурсивный подход с методом reduce, который будет возвращать только те элементы подменю, где найдено целевое значение, и отфильтровывать другие элементы.

const data = [{"menu":"Test","submenu":[{"menu":"Test1"},{"menu":"Test2","submenu":[{"menu":"Test2.1"},{"menu":"Test2.2"},{"menu":"Test2.3"}]},{"menu":"TestNew","submenu":[{"menu":"TestNew1.1"},{"menu":"TestNew1.2"},{"menu":"TestNew1.3"}]}]}]

function search(data, value) {
  return data.reduce((r, e) => {
    const object = { ...e }
    const result = search(e.submenu || [], value)
    if (result.length) object.submenu = result
    if (e.menu == value || result.length) r.push(object)
    return r;
  }, [])
}

console.log(search(data, 'Test2.1'))
console.log(search(data, 'TestNew1.3'))