代码之家 › 专栏 › 技术社区 › Sylar

筛选嵌套数组时保留数组结构

filter arrays javascript

Sylar · 技术社区 · 3 年前

我的大脑被这种高级过滤冻结了。这项任务已经超出了我的基本知识 filter , map 等

这里我有一个带有嵌套对象的数组:

const DATA = [
    {
        title: 'Spongebob',
        data: [
            { id: 1, name: 'Mr Crabs' },
            { id: 2, name: 'Sandy' }
        ]
    },
    {
        title: 'Dragon Balls Z',
        data: [
            { id: 1, name: 'GoKu' },
            { id: 2, name: 'Zamasu' }
        ]
    }
];

如果你和 React Native (RN)。这个问题不适用于RN。我需要对 name 属性,当我得到匹配时,我必须将格式返回为 DATA 变量

const handleFiltering = (value) => {

    const _value = value.toLowerCase();

    const results = DATA.map(o => {
        return o.data.filter(o => o.name.toLowerCase().indexOf(_value) != -1)
    });

    console.log(results);
};

我对深度过滤的有限了解返回的基本过滤 data 阵列,但需要保留结构 数据 。我期望的预期结果:


// I'm now querying for "ZAMASU"

const handleFiltering = (value='ZAMA') => {

    const _value = value.toLowerCase();

    const results = DATA.map(o => {
        return o.data.filter(o => o.name.toLowerCase().indexOf(_value) != -1)
    });

    // console.log(results) should now be
    // [
    //  {
    //      title: 'Dragon Balls Z',
    //     data: [
    //          { id: 2, name: 'Zamasu' }
    //      ]
    //  }
    // ];
};

脑海中浮现的是 {...DATA, something-here } 但我的大脑已经冻结了,因为我需要取回产权。请问如何做到这一点?

0 回复 | 直到 3 年前

Prebiusta 3 年前

另一种解决方案是首先使用filter只查找通过参数传递的数据中包含名称的对象,然后映射数据。

这是您调整后的过滤方法

const handleFiltering = (value) => {
  const _value = value.toLowerCase();

  const results = DATA.filter((obj) =>
    obj.data.some((character) => character.name.toLowerCase() === _value)
  ).map((obj) => ({
    title: obj.title,
    data: obj.data.filter(
      (character) => character.name.toLowerCase() === _value
    ),
  }));

  console.log(results);
};

Vivek Bani 3 年前

您可以使用 reduce 数组的方法。首先找出数据数组中的对象,然后通过保留原始结构将其作为新条目添加到累加器数组中。

const DATA = [
    {
        title: 'Spongebob',
        data: [
            { id: 1, name: 'Mr Crabs', where: 'tv' },
            { id: 2, name: 'Sandy' }
        ]
    },
    {
        title: 'Dragon Balls Z',
        data: [
            { id: 1, name: 'GoKu' },
            { id: 2, name: 'Zamasu' }
        ]
    }
];


let handleFiltering = (value='tv') => {
 return DATA.reduce((acc,d) => {
           let obj = d.data.find(a => a.name?.toLowerCase().includes(value.toLowerCase()) 
|| a.where?.toLowerCase().includes(value.toLowerCase()));
           obj ? acc.push({...d, data:[obj]}) : null; 
           return acc;
    }, []);
}

let result = handleFiltering();

console.log(result);