过滤JS多维数组

Question

我正在尝试过滤一些事件及其相应的时间段。数据结构是这样的：

var items = [
  {
    title: 'Category Title',
    events: [
      {
        title : '1:00pm',
        category : 1
      },
      {
        title: '2:00pm',
        category : 2
      }
    ]
  },
  {
    title: 'Category Title 2',
    events: [
      {
        title : '3:00pm',
        category : 1
      },
      {
        title: '4:00pm',
        category : 2
      }
    ]
  }
];

我想按类别过滤事件。我试过使用过滤器/地图，但似乎无法弄清楚。例如，如何过滤列表以仅返回类别为 1 的项目？

Answer 1

您可以使用函数filter 和函数some 来获取数组events 中具有特定类别的那些项目。

这个例子有一个项目，它的事件数组包含一个category === 3

var items = [  {    title: 'Category Title',    events: [      {        title : '1:00pm',        category : 1      },      {        title: '2:00pm',        category : 2      }    ]  },  {    title: 'Category Title 2',    events: [      {        title : '3:00pm',        category : 1      },      {        title: '4:00pm',        category : 2      }    ]  },  {    title: 'Category Title 3',    events: [      {        title : '3:00pm',        category : 1      },      {        title: '4:00pm',        category : 3      }    ]  }],
    cat = 3,
    result = items.filter(o => o.events.some(({category}) => cat === category));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

如果您只需要获取带有category === 3 的事件，请使用函数reduce：

var items = [  {    title: 'Category Title',    events: [      {        title : '1:00pm',        category : 1      },      {        title: '2:00pm',        category : 2      }    ]  },  {    title: 'Category Title 2',    events: [      {        title : '3:00pm',        category : 1      },      {        title: '4:00pm',        category : 2      }    ]  },  {    title: 'Category Title 3',    events: [      {        title : '3:00pm',        category : 1      },      {        title: '4:00pm',        category : 3      }    ]  }],
    cat = 3,
    result = items.reduce((a/*Accumulator*/, o/*Current object in array*/) => { 
      // 1. We get the events with a specific category  (In this case -> 3)
      var filtered = o.events.filter(({category}) => cat === category);
      
      // 2. If the previous filter returns at least one event, we need to push
      //    the current object 'o' with the filtered events.
      if (filtered.length) { // if length !== 0 we need to push the object.
        // 3. We use Object.assign to avoid any mutation over the original object.
        //    So, basically we create a new object with the original properties
        //    and finally we assign the filtered events to the property events.
        a.push(Object.assign({}, o, {events: filtered}));
      }
      
      return a;
    }, []/*Initial value (this array will contain the filtered objects)*/);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

您应该在这里做的是使用 Array.filter() method 过滤您的 items 数组，基于子 events 数组，您可以使用 Array.some() 对其进行测试 找到category===1 的人。

var filteredResults = items.filter(function(item) {
  return item.events.some(e => e.category === 1);
});

演示：

var items = [{
    title: 'Category Title',
    events: [{
        title: '1:00pm',
        category: 1
      },
      {
        title: '2:00pm',
        category: 2
      }
    ]
  },
  {
    title: 'Category Title 2',
    events: [{
        title: '3:00pm',
        category: 1
      },
      {
        title: '4:00pm',
        category: 2
      }
    ]
  }
];

var result = items.filter(function(item) {
  return item.events.some(e => e.category === 1);
});


console.log(result);

Answer 3

您可以使用过滤器来获取精简列表，但您可以通过其他方式（例如 reduce）来实现。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

var items = [
  {
    title: 'Category Title',
    events: [
      {
        title : '1:00pm',
        category : 1
      },
      {
        title: '2:00pm',
        category : 2
      }
    ]
  },
  {
    title: 'Category Title 2',
    events: [
      {
        title : '3:00pm',
        category : 1
      },
      {
        title: '4:00pm',
        category : 2
      }
    ]
  }
];
let cat1, cat2;
items.forEach(item => {
  cat1 = item.events.filter(item => item.category === 1)
  cat2 = item.events.filter(item => item.category === 2)
})


console.log(cat1, cat2)

这里更高级一点，你可以给函数一个你想要的类别数组，它会返回一个对象，其中包含所有类别的键和其中的事件。希望这可以帮助。

var items = [
      {
        title: 'Category Title',
        events: [
          {
            title : '1:00pm',
            category : 1
          },
          {
            title: '2:00pm',
            category : 2
          }
        ]
      },
      {
        title: 'Category Title 2',
        events: [
          {
            title : '3:00pm',
            category : 1
          },
          {
            title: '4:00pm',
            category : 2
          }
        ]
      }
    ];
    
    function filter(cat, arr) {
      return arr.filter(i => i.category === cat);
    }
    function getCategorys(category) {
      return items.reduce((prev, curr) => {
         category.forEach(cat => {
         !prev[cat] ? prev[cat] = [] : null;
         prev[cat] = [...filter(cat, curr.events), ...prev[cat]];
         })
         return prev;
      }, {})
    }
    
    console.log(getCategorys([1,2]))

Answer 4

您可以使用以下函数来获得所需的结果：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

function filterByCategory(items, category) {
    return items.reduce((events, i) => {
        const filteredEvents = i.events.filter(e => e.category === category);
        if (filteredEvents) {
            return events.concat(filteredEvents);
        }
        return events;
    }, []);
}

Answer 5

function hasCategory(item, cat) {
    for(e in item.events){
    if(item.events[e].category === cat) {
       return true;
     break;
    }
   }
   return false;
}

var filtered = items.filter((item) => {
    return hasCategory(item, 2);
});

console.log(filtered);