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'
                        },
                    ],
                },
            ],
        }]

我已引用链接Using array.filter down multiple levels，但它不符合我的输出。它返回如下所示的所有子菜单

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

用于搜索实现的多级数组过滤器

1 个答案: