使用嵌套值的過濾器數組給我未定義

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() ，因為這樣可以提供更合適的布爾結果，而不是獲取實際上不需要的嵌套對象。 這里沒有什么區別，但是我認為這是更好的形式。