我想通過多個復選框和它自己的屬性動態過濾資料，這是主要的資料物件
[
{
"_id": "61f0a145c6a48a907bd102ce",
"contract_id": "asac.near",
"token_series_id": "9",
"creator_id": "asac.near",
"in_circulation": 1,
"metadata": {
"name": "Antisocial Ape Club #10",
"symbol": "ASAC",
"description": "A collection of 3333 unique, randomly generated pixel art ape NFTs stored on the NEAR blockchain.",
"seller_fee_basis_points": 500,
"image": "image.png",
"external_url": "https://antisocialape.club/",
"attributes": [
{
"trait_type": "Antisocial Ape Club",
"value": "Genesis Apes",
"rarity_score": "1.00"
},
{
"trait_type": "Skin",
"value": "Zombie",
"rarity_score": "14.29"
},
{
"trait_type": "Mouth",
"value": "Cigarette",
"rarity_score": "3.85"
},
{
"trait_type": "Eyes",
"value": "Golden Goggles",
"rarity_score": "14.29"
},
{
"trait_type": "Head",
"value": "Devil Horns",
"rarity_score": "100.00"
},
{
"trait_type": "Neck",
"value": "None",
"rarity_score": "1.37"
},
{
"trait_type": "Earrings",
"value": "Silver Stud",
"rarity_score": "3.33"
}
],
"properties": {
"files": [
{
"uri": "image.png",
"type": "image/png"
}
],
"category": "image",
"creators": [
{
"address": "asac.near",
"share": 100
}
]
},
"title": "Antisocial Ape Club #10",
"media": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/9.png",
"media_hash": null,
"issued_at": "1643134423232219685",
"expires_at": null,
"starts_at": null,
"updated_at": null,
"extra": null,
"reference": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/9.json",
"reference_hash": null,
"creator_id": "asac.near",
"collection": null,
"score": 88.68721692128618
},
"price": null,
"royalty": {
"asac.near": "500"
},
"isMediaCdn": true,
"collection": null,
"lowest_price": null,
"has_price": null,
"total_rarity_score": 138.13,
"rank": 1
},
{
"_id": "61f0a148c6a48a907bd1065f",
"contract_id": "asac.near",
"token_series_id": "5",
"creator_id": "asac.near",
"in_circulation": 1,
"metadata": {
"name": "Antisocial Ape Club #6",
"symbol": "ASAC",
"description": "A collection of 3333 unique, randomly generated pixel art ape NFTs stored on the NEAR blockchain.",
"seller_fee_basis_points": 500,
"image": "image.png",
"external_url": "https://antisocialape.club/",
"attributes": [
{
"trait_type": "Antisocial Ape Club",
"value": "Genesis Apes",
"rarity_score": "1.00"
},
{
"trait_type": "Skin",
"value": "Green",
"rarity_score": "20.00"
},
{
"trait_type": "Mouth",
"value": "None",
"rarity_score": "2.70"
},
{
"trait_type": "Eyes",
"value": "None",
"rarity_score": "2.94"
},
{
"trait_type": "Head",
"value": "Crown",
"rarity_score": "100.00"
},
{
"trait_type": "Neck",
"value": "None",
"rarity_score": "1.37"
},
{
"trait_type": "Earrings",
"value": "Silver Stud",
"rarity_score": "3.33"
}
],
"properties": {
"files": [
{
"uri": "image.png",
"type": "image/png"
}
],
"category": "image",
"creators": [
{
"address": "asac.near",
"share": 100
}
]
},
"title": "Antisocial Ape Club #6",
"media": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/5.png",
"media_hash": null,
"issued_at": "1643135661510924041",
"expires_at": null,
"starts_at": null,
"updated_at": null,
"extra": null,
"reference": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/5.json",
"reference_hash": null,
"creator_id": "asac.near",
"collection": null,
"score": 106.86118243409153
},
"price": null,
"royalty": {
"asac.near": "500"
},
"isMediaCdn": true,
"collection": null,
"lowest_price": null,
"updated_at": 1649489685487,
"has_price": null,
"total_rarity_score": 131.34,
"rank": 2
},
{
"_id": "61f0a163c6a48a907bd11a77",
"contract_id": "asac.near",
"token_series_id": "39",
"creator_id": "asac.near",
"in_circulation": 1,
"metadata": {
"name": "Antisocial Ape Club #40",
"symbol": "ASAC",
"description": "A collection of 3333 unique, randomly generated pixel art ape NFTs stored on the NEAR blockchain.",
"seller_fee_basis_points": 500,
"image": "image.png",
"external_url": "https://antisocialape.club/",
"attributes": [
{
"trait_type": "Antisocial Ape Club",
"value": "Genesis Apes",
"rarity_score": "1.00"
},
{
"trait_type": "Skin",
"value": "Gingerbread",
"rarity_score": "100.00"
},
{
"trait_type": "Mouth",
"value": "Blunt",
"rarity_score": "3.45"
},
{
"trait_type": "Eyes",
"value": "Red Vr Headset",
"rarity_score": "14.29"
},
{
"trait_type": "Head",
"value": "None",
"rarity_score": "5.00"
},
{
"trait_type": "Neck",
"value": "None",
"rarity_score": "1.37"
},
{
"trait_type": "Earrings",
"value": "Silver Stud",
"rarity_score": "3.33"
}
],
"properties": {
"files": [
{
"uri": "image.png",
"type": "image/png"
}
],
"category": "image",
"creators": [
{
"address": "asac.near",
"share": 100
}
]
},
"title": "Antisocial Ape Club #40",
"media": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/39.png",
"media_hash": null,
"issued_at": "1643133670278506382",
"expires_at": null,
"starts_at": null,
"updated_at": null,
"extra": null,
"reference": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/39.json",
"reference_hash": null,
"creator_id": "asac.near",
"collection": null,
"score": 132.14806994411788
},
"price": null,
"royalty": {
"asac.near": "500"
},
"isMediaCdn": true,
"collection": null,
"lowest_price": null,
"updated_at": 1651360595494,
"has_price": null,
"total_rarity_score": 128.44,
"rank": 3
},
]
我將 trait_type 復選框中的值和主物件的值放在這樣的陣列中
[
"Genesis Apes",
"Antisocial Ape Club",
"Zombie",
"Skin"
]
我做了一個這樣的鍵陣列
[
"trait_type",
"value",
]
然后我使用過濾器，每個和包含來設定過濾變數的值，但它不起作用，結果長度為 0
setFilteredNftDatas(nftsDatas.filter(function (nftData: any) {
return nftData.metadata.attributes.every(function (elem: any, index: any, array: any) {
return filtersKeys.every(function (key) {
return filtersValues.includes(nftData.metadata.attributes[index][key]);
})
})
}));
uj5u.com熱心網友回復：
不確定它是否完全解決了您的問題，但我認為它可以幫助您：
let data = [
{
'param1': 'a',
'param2': 'b',
'param3': 'c',
},
{
'param1': 'a',
'param2': 'd',
'param3': 'e',
},
{
'param1': 'e',
'param2': 'a',
'param3': 'd',
},
]
let keys = ['param1', 'param2'];
let values = ['b', 'e'];
let filtered_data = data.filter(d => {
for(let key of keys) {
for(let value of values) {
if(d[key] == value) {
return true;
}
}
}
return false;
});
console.log(filtered_data);
//Output :
[
{param1: 'a', param2: 'b', param3: 'c'},
{param1: 'e', param2: 'a', param3: 'd'}
]
uj5u.com熱心網友回復：
嘗試這樣的事情，它過濾所有具有指定值的屬性鍵的 nfts：
const data = ...your data
const keys = ["trait_type", "value"]
const values = ["Genesis Apes", "Antisocial Ape Club", "Zombie", "Skin"]
const filterData = (data, keys, values) => {
const filteredData = data.filter(nft => {
return nft.metadata.attributes.some(attribute => {
return Object.keys(attribute).find(key => keys.includes(key) && values.includes(attribute[key])
)})
})
return filteredData
}
uj5u.com熱心網友回復：
我使用我的ruleOut函式根據特定的不需要的屬性值過濾物件。
function ruleOut(arr, filterObj, applyAllFilters=true) {
return arr.filter( row => {
for (var field in filterObj) {
var val = row[field];
if (val) {
if (applyAllFilters && filterObj[field].indexOf(val) > -1) return false;
else if (!applyAllFilters) {
return filterObj[field].filter(function(filterValue){
return (val.indexOf(filterValue)>-1);
}).length == 0;
}
}
}
return true;
});
}
假設你有一個這樣的演員串列：
let actors = [
{userName:"Mary", job:"star", language:"Turkish"},
{userName:"John", job:"actor", language:"Turkish"},
{userName:"Takis", job:"star", language:"Greek"},
{userName:"Joe", job:"star", language:"Turkish"},
{userName:"Bill", job:"star", language:"Turkish"}
];
你想找到所有被評為好萊塢明星的演員，他們的國籍不應該是“英國”、“意大利”、“西班牙”、“希臘”之一，而且他們的名字不能是“瑪麗”之一， “喬”。Bizzar的例子，我知道！無論如何，使用這組條件，您將創建以下物件：
let unwantedFieldsFilter= {
userName: ['Mary', 'Joe'],
job: ['actor'],
language: ['English', 'Italian', 'Spanish', 'Greek']
};
好的，現在如果你ruleOut(actors, unwantedFieldsFilter)只得到
[{用戶名：“比爾”，作業：“明星”，語言：“土耳其語”}]
比爾是你的男人，因為他的名字不是“瑪麗”、“喬”中的一個，他的國籍不包括在[“英國”、“意大利”、“西班牙”、“希臘”]中，而且他是明星！
我的方法中有一個選項，即applyAllFilters默認情況下為 true。如果您嘗試將此引數設定為 false 的 ruleOut，則將用作“OR”過濾而不是“AND”。示例：ruleOut(actors, {job:["actor"], language:["Italian"]}, false)會讓你得到不是演員或意大利人的每個人：
[{用戶名：“瑪麗”，作業：“明星”，語言：“土耳其語”}，
{用戶名：“塔基斯”，作業：“明星”，語言：“希臘語”}，
{用戶名：“喬”，作業： “明星”，語言：“土耳其語”}，
{用戶名：“比爾”，作業：“明星”，語言：“土耳其語”}]
uj5u.com熱心網友回復：
我制作了一個可擴展的多路過濾代碼。
const data = [
{
"_id": "61f0a145c6a48a907bd102ce",
"contract_id": "asac.near",
"token_series_id": "9",
"creator_id": "asac.near",
"in_circulation": 1,
"metadata": {
"name": "Antisocial Ape Club #10",
"symbol": "ASAC",
"description": "A collection of 3333 unique, randomly generated pixel art ape NFTs stored on the NEAR blockchain.",
"seller_fee_basis_points": 500,
"image": "image.png",
"external_url": "https://antisocialape.club/",
"attributes": [
{
"trait_type": "Antisocial Ape Club",
"value": "Genesis Apes",
"rarity_score": "1.00"
},
{
"trait_type": "Skin",
"value": "Zombie",
"rarity_score": "14.29"
},
{
"trait_type": "Mouth",
"value": "Cigarette",
"rarity_score": "3.85"
},
{
"trait_type": "Eyes",
"value": "Golden Goggles",
"rarity_score": "14.29"
},
{
"trait_type": "Head",
"value": "Devil Horns",
"rarity_score": "100.00"
}
],
"properties": {
"files": [
{
"uri": "image.png",
"type": "image/png"
}
],
"category": "image",
"creators": [
{
"address": "asac.near",
"share": 100
}
]
},
"title": "Antisocial Ape Club #10",
"media": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/9.png",
"media_hash": null,
"issued_at": "1643134423232219685",
"expires_at": null,
"starts_at": null,
"updated_at": null,
"extra": null,
"reference": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/9.json",
"reference_hash": null,
"creator_id": "asac.near",
"collection": null,
"score": 88.68721692128618
},
"price": null,
"royalty": {
"asac.near": "500"
},
"isMediaCdn": true,
"collection": null,
"lowest_price": null,
"has_price": null,
"total_rarity_score": 138.13,
"rank": 1
},
{
"_id": "61f0a148c6a48a907bd1065f",
"contract_id": "asac.near",
"token_series_id": "5",
"creator_id": "asac.near",
"in_circulation": 1,
"metadata": {
"name": "Antisocial Ape Club #6",
"symbol": "ASAC",
"description": "A collection of 3333 unique, randomly generated pixel art ape NFTs stored on the NEAR blockchain.",
"seller_fee_basis_points": 500,
"image": "image.png",
"external_url": "https://antisocialape.club/",
"attributes": [
{
"trait_type": "Antisocial Ape Club",
"value": "Genesis Apes",
"rarity_score": "1.00"
},
{
"trait_type": "Skin",
"value": "Green",
"rarity_score": "20.00"
},
{
"trait_type": "Mouth",
"value": "None",
"rarity_score": "2.70"
},
{
"trait_type": "Neck",
"value": "None",
"rarity_score": "1.37"
},
{
"trait_type": "Earrings",
"value": "Silver Stud",
"rarity_score": "3.33"
}
],
"properties": {
"files": [
{
"uri": "image.png",
"type": "image/png"
}
],
"category": "image",
"creators": [
{
"address": "asac.near",
"share": 100
}
]
},
"title": "Antisocial Ape Club #6",
"media": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/5.png",
"media_hash": null,
"issued_at": "1643135661510924041",
"expires_at": null,
"starts_at": null,
"updated_at": null,
"extra": null,
"reference": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/5.json",
"reference_hash": null,
"creator_id": "asac.near",
"collection": null,
"score": 106.86118243409153
},
"price": null,
"royalty": {
"asac.near": "500"
},
"isMediaCdn": true,
"collection": null,
"lowest_price": null,
"updated_at": 1649489685487,
"has_price": null,
"total_rarity_score": 131.34,
"rank": 2
},
{
"_id": "61f0a163c6a48a907bd11a77",
"contract_id": "asac.near",
"token_series_id": "39",
"creator_id": "asac.near",
"in_circulation": 1,
"metadata": {
"name": "Antisocial Ape Club #40",
"symbol": "ASAC",
"description": "A collection of 3333 unique, randomly generated pixel art ape NFTs stored on the NEAR blockchain.",
"seller_fee_basis_points": 500,
"image": "image.png",
"external_url": "https://antisocialape.club/",
"attributes": [
{
"trait_type": "Antisocial Ape Club",
"value": "Genesis Apes",
"rarity_score": "1.00"
},
{
"trait_type": "Skin",
"value": "Gingerbread",
"rarity_score": "100.00"
},
{
"trait_type": "Mouth",
"value": "Blunt",
"rarity_score": "3.45"
},
{
"trait_type": "Eyes",
"value": "Red Vr Headset",
"rarity_score": "14.29"
},
{
"trait_type": "Head",
"value": "None",
"rarity_score": "5.00"
},
{
"trait_type": "Neck",
"value": "None",
"rarity_score": "1.37"
},
{
"trait_type": "Earrings",
"value": "Silver Stud",
"rarity_score": "3.33"
}
],
"properties": {
"files": [
{
"uri": "image.png",
"type": "image/png"
}
],
"category": "image",
"creators": [
{
"address": "asac.near",
"share": 100
}
]
},
"title": "Antisocial Ape Club #40",
"media": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/39.png",
"media_hash": null,
"issued_at": "1643133670278506382",
"expires_at": null,
"starts_at": null,
"updated_at": null,
"extra": null,
"reference": "https://ipfs.io/ipfs/bafybeicj5zfhe3ytmfleeiindnqlj7ydkpoyitxm7idxdw2kucchojf7v4/39.json",
"reference_hash": null,
"creator_id": "asac.near",
"collection": null,
"score": 132.14806994411788
},
"price": null,
"royalty": {
"asac.near": "500"
},
"isMediaCdn": true,
"collection": null,
"lowest_price": null,
"updated_at": 1651360595494,
"has_price": null,
"total_rarity_score": 128.44,
"rank": 3
},
]
const filters =
{
TRAIT_TYPE: [
"Earrings"
]/*,
SOME_OTHER_FILTER: [
...
]
*/
}
const filtered = data.filter((d) => {
let traitTypePasses = false;
// let some_other_filterPasses = false;
for(let filter in filters) {
if(filter === "TRAIT_TYPE") {
let traits = d.metadata.attributes
.filter((a) => filters[filter].includes(a.trait_type));
traitTypePasses = traits.length > 0;
}
/*
if(filter === "SOME_OTHER_FILTER") {
let traits = d.metadata.attributes
.filter((a) => filters[filter].includes(a.trait_type));
some_other_filterPasses = traits.length > 0;
}
*/
}
return [traitTypePasses/*, some_other_filterPasses */].every((p) => p);
});
console.log(filtered.map((x) => x._id));您在過濾器物件中定義過濾器，如圖所示。
然后我們有這個片段：
const filtered = data.filter((d) => {
let traitTypePasses = false;
// let some_other_filterPasses = false;
for(let filter in filters) {
if(filter === "TRAIT_TYPE") {
let traits = d.metadata.attributes
.filter((a) => filters[filter].includes(a.trait_type));
traitTypePasses = traits.length > 0;
}
/*
if(filter === "SOME_OTHER_FILTER") {
let traits = d.metadata.attributes
.filter((a) => filters[filter].includes(a.trait_type));
some_other_filterPasses = traits.length > 0;
}
*/
}
return [traitTypePasses/*, some_other_filterPasses */].every((p) => p);
});
我們可以為過濾器陣列中定義的每個過濾器定義一個“本地通過”值。所有過濾器都必須通過，資料中的物件才能通過主過濾器。因此，如果您在那里有第二個 if 塊，_id例如過濾，代碼將檢查每個物件是否在另一個過濾器中具有給定_id 和給定屬性 - 如果沒有，則物件不會傳遞給最終的過濾陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/492375.html
標籤：javascript 反应 循环 筛选 反应打字稿