Question

我想使用javascript过滤器功能过滤一些信息，但我似乎无法正常工作。鉴于我有一些原始数据，如下所示：

{
    "salesWeeks": [
        {
            "date": "29/03/2019",
            "locations": [
                {
                    "name": "London",
                    "totalUnits": 15,
                    "cars": [
                        {
                            "name" : "Audi",
                            "units": 5
                        },
                        {
                            "name": "BMW",
                            "units": 10
                        }
                    ]
                }
            ] 
        },
        {
            "date": "29/03/2019",
            "locations": [
                {
                    "name": "Paris",
                    "totalUnits": 22,
                    "cars": [
                        {
                            "name" : "Audi",
                            "units": 2
                        },
                        {
                            "name": "BMW",
                            "units": 10
                        },                    
                        {
                            "name": "Porsche",
                            "units": 10
                        }
                    ]
                }
            ] 
        }
    ]
}

我想通过汽车名称在我的UI中过滤此数据。如果用户选择一个过滤器选项，该选项将返回带有['Audi']的数组。

我需要做什么才能得到以下响应：

{
    "salesWeeks": [
        {
            "date": "29/03/2019",
            "locations": [
                {
                    "name": "London",
                    "totalUnits": 15,
                    "cars": [
                        {
                            "name" : "Audi",
                            "units": 5
                        }
                    ]
                }
            ] 
        },
        {
            "date": "29/03/2019",
            "locations": [
                {
                    "name": "Paris",
                    "totalUnits": 22,
                    "cars": [
                        {
                            "name" : "Audi",
                            "units": 2
                        }
                    ]
                }
            ] 
        }
    ]
}

我最好的猜测方法是：

https://jsfiddle.net/hwt3k2sn/7/

var salesWeeks = [{"date":"29/03/2019","locations":[{"name":"London","totalUnits":15,"cars":[{"name":"Audi","units":5},{"name":"BMW","units":10}]}]},{"date":"29/03/2019","locations":[{"name":"Paris","totalUnits":22,"cars":[{"name":"Audi","units":2},{"name":"BMW","units":10},{"name":"Porsche","units":10}]}]}]

salesWeeks = salesWeeks
.filter(week => {
    return week.locations
    .some(location => {
        return location
        .cars.filter(cars => { cars.name == "Audi" })
    })
})

console.log(salesWeeks)

虽然似乎最后忽略了过滤器：\\如果有人对此有修复，我将非常感谢您的帮助，对于那些精通Javascript方式的人来说，这可能相当简单。

Answer 1

当您的期望响应与原始原始数据的类型不同时，您需要更多的运算符。

在您的情况下，我使用.map函数来做到这一点：

var salesWeeks = [{"date":"29/03/2019","locations":[{"name":"London","totalUnits":15,"cars":[{"name":"Audi","units":5},{"name":"BMW","units":10}]}]},{"date":"29/03/2019","locations":[{"name":"Paris","totalUnits":22,"cars":[{"name":"Audi","units":2},{"name":"BMW","units":10},{"name":"Porsche","units":10}]}]}]

const CAR_BRANDS = ["Audi", "Porsche"];

salesWeeks = salesWeeks
.filter(week => {
    return week.locations
    .some(location => {
        return !!location
        .cars.filter(car => CAR_BRANDS.includes(car.name)).length // return a bolean value length = 0 => false...
    })
})
.map(week => {
  week.locations = week.locations.map(l => {
    l.cars = l.cars.filter(car => CAR_BRANDS.includes(car.name)); // only keep a car
    return l;
  });
  return week;
});

console.log(JSON.stringify(salesWeeks, null, 4));

Answer 2

尝试一下。很少dig @127.0.0.1 -p 8600 webserver.service.dc1.bino.inc会有所帮助。

.some()

Answer 3

您可以使用Array.reduce()：

使用reduce和初始的空数组遍历您的几周。
每周将位置映射到一个新数组，其车辆条目将被过滤以删除不需要的车辆。
如果有任何位置，并且这些位置还有剩余的汽车，则通过复制一周并用新的一周覆盖其位置，将新的一周推入输出数组。

const salesWeeks = [{"date":"29/03/2019","locations":[{"name":"London","totalUnits":15,"cars":[{"name":"Audi","units":5},{"name":"BMW","units":10}]}]},{"date":"29/03/2019","locations":[{"name":"Paris","totalUnits":22,"cars":[{"name":"Audi","units":2},{"name":"BMW","units":10},{"name":"Porsche","units":10}]}]}]

const filterByCar = (data, car) => data.reduce((acc, week) => {
  const locations = week.locations.map(l => ({ ...l, cars: l.cars.filter(c => c.name === car) }));
  if (locations.length && locations.some(l => l.cars && l.cars.length)) {
    acc.push({ ...week, locations });
  }
  return acc;
}, []);

console.log(filterByCar(salesWeeks, 'Audi'));
console.log(filterByCar(salesWeeks, 'Porsche'));
console.log(filterByCar(salesWeeks, 'Whatever'));

Javascript深度嵌套数组过滤器

3 个答案: