Javascript深度嵌套數組過濾器

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

嘗試這個。 很少的.some()可能有所幫助。

 const obj = { "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" : "Toyota", "units": 2 }, { "name" : "Mercedes", "units": 5 } ] } ] } ] } const filterByCar = (arr, carBrand) => { return arr.filter(week => week.locations.some(loc => loc.cars.some(car => car.name === carBrand))) } console.log(filterByCar(obj.salesWeeks, 'Toyota')) 

Answer 3

您可以使用Array.reduce()做到這一點：

1. 使用reduce和初始的空數組遍歷您的幾周。
2. 對於每周，將位置映射到一個新的數組，其車輛條目將被過濾以刪除不需要的車輛。
3. 如果有任何位置，並且這些位置還有剩余的汽車，則通過復制一周並用新的一周覆蓋其位置，將新的一周推入輸出數組。

 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'));