Javascript 如何对json数据应用多个过滤器
我正在构建的站点有一个动态生成的产品页面。我有三个过滤器（品牌，类别，条件），我希望能够应用任何组合。我知道如何使用CSS实现这一点，但我希望过滤后的内容直接应用于JSON文件并重新加载页面 JSON文件中大约有25个产品，但这里有3个供参考Javascript 如何对json数据应用多个过滤器,javascript,arrays,filter,local-storage,Javascript,Arrays,Filter,Local Storage,我正在构建的站点有一个动态生成的产品页面。我有三个过滤器（品牌，类别，条件），我希望能够应用任何组合。我知道如何使用CSS实现这一点，但我希望过滤后的内容直接应用于JSON文件并重新加载页面 JSON文件中大约有25个产品，但这里有3个供参考 [ { "id": "0", "category": "electric", "condition": "used", "justIn": "true", "brand": "gibson", "year
[
{
"id": "0",
"category": "electric",
"condition": "used",
"justIn": "true",
"brand": "gibson",
"year": "1952",
"code": "456def",
"img1": "../img/sale/gibson/295-1.jpg",
"img2": "../img/sale/gibson/295-2.jpg",
"img3": "../img/sale/gibson/295-3.jpg",
"img4": "../img/sale/gibson/295-4.jpg",
"alt": "gibson guitar",
"title": "Gibson ES-295 1952",
"price": "6000.00",
"description": "A beautiful ES-295 with wear you can't fake! The ES-295 was originally produced from 1952 to 1958 and is best known for being the model played by Scotty Moore with Elvis. This particular example plays well with a fantastic feeling neck! The guitar has heavy finish wear with the beautiful greening that you often see on '50s goldtops. Glaser has refretted the guitar and replaced the tailpiece crossbar. The pickguard is missing.",
"specs": ["Body Wood - Laminated Maple",
"Neck Wood - Mahogany",
"Fingerboard Wood - Rosewood",
"Scale Length - 24.75",
"Nut Width - 1 11/16",
"Pickup(s) - Original P-90s",
"Case - Hard Case"
]
},
{
"id": "9",
"category": "electric",
"condition": "used",
"justIn": "true",
"brand": "fender",
"year": "2010",
"code": "123abc",
"img1": "../img/sale/fender/strat-sb-1.jpg",
"img2": "../img/sale/fender/strat-sb-2.jpg",
"img3": "../img/sale/fender/strat-sb-3.jpg",
"img4": "../img/sale/fender/strat-sb-4.jpg",
"alt": "fender guitar",
"title": "Fender Stratocaster '59 Reissue",
"price": "1350.00",
"description": "A quality '59 reissue Stratocaster. The guitar is in excellent condition and comes with the original brown hard case and case candy.",
"specs": ["Fingerboard - Rosewood",
"Pickup(s) - Original pickups",
"Case - Original Hard Case"
]
},
{
"id": "23",
"category": "electric",
"condition": "used",
"justIn": "false",
"brand": "gretsch",
"year": "1958",
"code": "123abc",
"img1": "../img/sale/gretsch/gr-cahb-1.jpg",
"img2": "../img/sale/gretsch/gr-cahb-2.jpg",
"img3": "../img/sale/gretsch/gr-cahb-3.jpg",
"img4": "../img/sale/gretsch/gr-cahb-4.jpg",
"alt": "gretsch guitar",
"title": "Gretsch Chet Atkins Hollow Body (6120) 1958",
"price": "13500.00",
"description": "A classic 6120 Chet Atkins in excellent condition! This single-cut Grestch is loaded with its original filtertrons pickups which tonally sit perfectly between a humbucker and a tele. The finish is in beautiful condition with a faded orange color. Few guitars sound like a Gretsch and this is a prime example of their most popular model. This guitar was previously owned by Ed King.",
"specs": ["Top Wood - Maple",
"Back/Side Wood - Maple",
"Fingerboard Wood - Rosewood",
"Scale Length -24.75",
"Pickup(s) - Original Filtertrons",
"Case - Original White Case"
]
}
]
static filteredInstrumentsHandler() {
let filters = InStorage.getFilters("filters")
let instruments = InStorage.getAllInstruments("all-instruments")
let filteredInstruments = InStorage.getFilteredInstruments("filtered-instruments")
let tempArray = []
if (filters.length) {
filters.map((filt, index) => {
let key = filt.key
instruments.map((inst, index) => {
if (filt.id === inst[key]) {
tempArray.push(inst)
}
})
})
InStorage.saveFilteredInstruments(tempArray)
inUI.displayInstruments(tempArray)
} else {
inUI.displayInstruments(instruments)
}
}
实现这一点的一个更简单的方法是在HTML中打印类别，如下所示：
“显示：块”“显示：无”