首先，如果我的問題太明顯，我很抱歉，但我的知識有限，我不知道如何實現我正在嘗試的目標。我有一個 JSON 文件作為數據（歌曲）的來源，我正在嘗試根據幾個字段（級別、名稱、藝術家等）過濾該數據。
來自 JSON 的一些數據示例：
[
{"artist": "Black",
"categories": "Arreglos",
"date": 1639127185000,
"level": "Fácil",
"musicStyle": "Pop/Rock",
"name": "Wonderful Life",
"practice": "n/a",
"preloadID": "Wonderful_Life",
"subtitle": "Fácil",
},
{"artist": "",
"categories": "Arreglos",
"date": 1587948049309,
"image": "./images/arreglos/a_million_dreams.jpeg",
"level": "Fácil",
"musicStyle": "Film/TV",
"name": "A million dreams",
"preloadID": "AMillionDreams_Facil",
"subtitle": "Fácil",
},
{"artist": "",
"categories": "Arreglos",
"date": 1587948046688,
"image": "./images/arreglos/a_million_dreams.jpeg",
"level": "Principiante",
"musicStyle": "Film/TV",
"name": "A million dreams",
"preloadID": "AMillionDreams_Principiante",
"subtitle": "Principiante",
},
{"artist": "Vanessa Carlton",
"categories": "Arreglos",
"date": 1602939064030,
"level": "Fácil",
"musicStyle": "Pop/Rock",
"name": "A thousand miles",
"preloadID": "AThousandMiles_Facil",
"subtitle": "Fácil",
},
{"artist": "Vanessa Carlton",
"categories": "Arreglos",
"date": 1602939064033,
"level": "Muy fácil",
"musicStyle": "Pop/Rock",
"name": "A thousand miles",
"preloadID": "AThousandMiles_MuyFacil",
"subtitle": "Muy fácil",
"tonality": ""
},
]
這是我必須嘗試過濾數據的腳本。
let filteredItems = [];
let filterLevel=this.context.appActions.dataSlots['ds_LevelFilter'];
let filterStr=this.context.appActions.dataSlots['ds_SearchFilter'];
filterStr=filterStr.toLowerCase();
items.forEach(item => {
if (item["artist"].toLowerCase().includes(filterStr) || item["name"].toLowerCase().includes(filterStr) ) {
filteredItems.push(item);
}
});
items.forEach(item => {
if (item["level"] == filterLevel) {
filteredItems.push(item);
}
});
items = filteredItems.sort((a, b) => {
return new Date(b.date) - new Date(a.date);
}).slice(0,this.context.appActions.dataSlots['ds_limitQuery']);
return items;
對於 filterStr，我有一個文本字段，用戶可以在其中編寫搜索，如果該字段包含在名稱或藝術家中，則應返回結果文檔。
在 filterLevel 中，我有一個帶有多個值的選擇器（西班牙語中的“Easy”、“Medium”等），它應該等於數據中的字段“級別”。
我不確定代碼是否顯示了我正在嘗試的內容，但如果我只使用第一個 if 塊（名稱和藝術家），它可以完美運行。但是如果我添加第二個，它會給我一個重複鍵的錯誤（它是一個 React 項目）。我猜腳本不正確。
使用對象過濾器：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
const songs = [
{
id: 1,
name: 'Golden Hour',
artist: 'Kacey Musgraves',
level: "Fácil",
},
{
id: 2,
name: 'King Size Manger',
artist: 'Josh Turner',
level: "Fácil",
},
{
id: 3,
name: 'Legend',
artist: 'Bob Marley',
level: "Muy fácil",
},
{
id: 4,
name: 'Catch A Fire',
artist: 'Bob Marley',
level: "Muy fácil",
},
{
id: 5,
name: 'Fine Line',
artist: 'Harry Styles',
level: "Fácil",
},
]
function filterSongs(filterStr = '', filterLevel = '') {
return songs.filter(item => {
const context = filterStr.toLowerCase()
// Filter on level else ignore by always returning true.
let result = filterLevel.length ? (item.level === filterLevel) : true
// If result is false because level was set and did not match then skip filterStr check.
// If result is true because level was ignored or matched then search if filterStr has value.
if(result && filterStr.length) {
result = item.artist.toLowerCase().includes(context) || item.name.toLowerCase().includes(context)
}
return result
})
}
console.log('Search for Harry', filterSongs('Harry'))
console.log('Search for level Fácil', filterSongs('', 'Fácil'))
console.log('Search for Golden with level Fácil', filterSongs('Golden', 'Fácil'))
console.log('Search for Bob', filterSongs('Bob'))如何使用您的示例實現上述代碼：
let filterLevel = this.context.appActions.dataSlots['ds_LevelFilter'] ?? '';
let filterStr = this.context.appActions.dataSlots['ds_SearchFilter'] ?? '';
let filterLimit = this.context.appActions.dataSlots['ds_limitQuery'] ?? 15;
function filterSongs(filterStr = '', filterLevel = '') {
return songs.filter(item => {
const context = filterStr.toLowerCase()
// Filter on level else ignore by always returning true.
let result = filterLevel.length ? (item.level === filterLevel) : true
// If result is false because level was set and did not match then skip filterStr check.
// If result is true because level was ignored or matched then search if filterStr has value.
if(result && filterStr.length) {
result = item.artist.toLowerCase().includes(context) || item.name.toLowerCase().includes(context)
}
return result
})
}
let filteredItems = filterSongs(filterStr, filterLevel)
return filteredItems.sort((a, b) => {
return new Date(b.date) - new Date(a.date);
}).slice(0,filterLimit);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句