使用嵌套值的过滤器数组给我未定义

Question

如何使用嵌套数组中的值过滤顶级数组？

我在下面有我的代码，并且摆弄

const selectedId = 62;
const filteredEvents = {};
const events = {
  "2018-01-31": {
    dots: [{
      key: "test",
      color: "red",
      categories: [{
        name: "cat 1",
        id: 59
      }, {
        name: "cat 2",
        id: 61
      }, {
        name: "cat 3",
        id: 62
      }]
    }, {
      key: "test again",
      color: "blue",
      categories: [{
        name: "cat 1",
        id: 59
      }, {
        name: "cat 2",
        id: 61
      }]
    }]
  },
  "2018-02-02": {
    dots: [{
      key: "test 1",
      color: "blue",
      categories: [{
        name: "cat 1",
        id: 59
      }]
    }]
  },
  "2018-02-04": {
    dots: [{
      key: "test 2",
      color: "pink",
      categories: [{
        name: "cat 1",
        id: 59
      }]
    }, {
      key: "test 2",
      color: "pink",
      categories: [{
        name: "cat 1",
        id: 59
      }]
    }]
  }
};

使用此过滤器：

   const results = Object.values(events)
                .filter(({ dots: [event] }) => {
                    event.categories.find(
                        category => category.id === selectedId
                    );
                })
                .pop();

// console.log(results) undefined

我只希望此属性在过滤对象中，因为它的类别ID为62：

const events = {
  "2018-01-31": {
    dots: [{
      key: "test",
      color: "red",
      categories: [{
        name: "cat 1",
        id: 59
      }, {
        name: "cat 2",
        id: 61
      }, {
        name: "cat 3",
        id: 62
      }]
    }]
  }

Answer 1

您对该过滤器略有疏忽。 这是一个箭头函数，它需要以以下形式显式返回：

filter(({ dots: [event] }) => {
    // add "return" here
    return event.categories.find(category => category.id === selectedId);
})

由于您在该块中没有执行任何其他操作，因此可以省略括号并返回：

filter(({ dots: [event] }) => event.categories.find(category => category.id === selectedId))

否则，您的filter函数将始终返回undefined，这意味着filter会将所有内容都取出来，因此pop（）没有任何作用。

Answer 2

如我的评论所述，您不会从过滤器回调中返回任何内容。

同样，您的销毁任务是明确捕获dots组中的第一个对象，而不是所有对象。 因为看你前面的问题，你要搜索的所有类别，你就需要引用整个数组来获取所有对象的所有类别dots 。

 const events = {"2018-01-31":{"dots":[{"key":"test","color":"red","categories":[{"name":"cat 1","id":59},{"name":"cat 2","id":61},{"name":"cat 3","id":62}]},{"key":"test again","color":"blue","categories":[{"name":"cat 1","id":59},{"name":"cat 2","id":61}]}]},"2018-02-02":{"dots":[{"key":"test 1","color":"blue","categories":[{"name":"cat 1","id":59}]}]},"2018-02-04":{"dots":[{"key":"test 2","color":"pink","categories":[{"name":"cat 1","id":59}]},{"key":"test 2","color":"pink","categories":[{"name":"cat 1","id":59}]}]}}; const target = 62; const results = Object.entries(events) .filter(([_, o]) => o.dots.some(oo => oo.categories.some(c => c.id === target))) .reduce((res, [k,o]) => ({...res, [k]:o}), {}); console.log(results); 

我在最后删除了.pop() ，因为如果找到多个，它将​​给您最后一个匹配项。 不知道为什么会在那里。 如果您想要所有比赛，那么绝对不应该在那里。 如果只想要一个，我会使用.find()而不是.filter() 。 如果您想要最后一次匹配，我仍然会使用.find()但首先会使用.reverse()值数组。

我还在嵌套数组上使用了.some()而不是.find() ，因为这样可以提供更合适的布尔结果，而不是获取实际上不需要的嵌套对象。 这里没有什么区别，但是我认为这是更好的形式。