这看起来比实际大，它只是使问题看起来很大的对象。但我认为你需要看到整个事物的形状
我的物体形状有点问题。当我单击复选框时，它会过滤对象以根据项目的ID返回唯一条目。被过滤的对象是两个数组year和sector
的赋值const filterObject = {...years, ...sectors};
看起来像这样：
filterObject =
{
"2016": [
{
"id": 0,
"name": "charity1",
"sector": "Conservation",
"year": 2016,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.3397,
"longitude": 12.3731,
"donations": 50000,
"image": "https://lorempixel.com/321/200/nature",
"logo": "https://lorempixel.com/100/50/abstract"
},
{
"id": 3,
"name": "charity4",
"sector": "Sport",
"year": 2016,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 50.5764627,
"longitude": 9.2230577,
"donations": 74000,
"image": "https://lorempixel.com/321/200/sport",
"logo": "https://lorempixel.com/100/50/abstract"
}
],
"2017": [
{
"id": 1,
"name": "charity2",
"sector": "Children",
"year": 2017,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.0504,
"longitude": 13.7373,
"donations": 100000,
"image": "https://lorempixel.com/321/200/abstract",
"logo": "https://lorempixel.com/100/50/abstract"
}
],
"2018": [
{
"id": 2,
"name": "charity3",
"sector": "Seniors",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.5413,
"longitude": 9.9158,
"donations": 70000,
"image": "https://lorempixel.com/321/200/people",
"logo": "https://lorempixel.com/100/50/abstract"
},
{
"id": 4,
"name": "charity5",
"sector": "Homeless",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.9500019,
"longitude": 7.4836722,
"donations": 60000,
"image": "https://lorempixel.com/321/200/city",
"logo": "https://lorempixel.com/100/50/abstract"
},
{
"id": 5,
"name": "charity6",
"sector": "Homeless",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 50.9500019,
"longitude": 6.4836722,
"donations": 60000,
"image": "https://lorempixel.com/321/200/city",
"logo": "https://lorempixel.com/100/50/abstract"
}
],
"Conservation": [
{
"id": 0,
"name": "charity1",
"sector": "Conservation",
"year": 2016,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.3397,
"longitude": 12.3731,
"donations": 50000,
"image": "https://lorempixel.com/321/200/nature",
"logo": "https://lorempixel.com/100/50/abstract"
}
],
"Children": [
{
"id": 1,
"name": "charity2",
"sector": "Children",
"year": 2017,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.0504,
"longitude": 13.7373,
"donations": 100000,
"image": "https://lorempixel.com/321/200/abstract",
"logo": "https://lorempixel.com/100/50/abstract"
}
],
"Seniors": [
{
"id": 2,
"name": "charity3",
"sector": "Seniors",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.5413,
"longitude": 9.9158,
"donations": 70000,
"image": "https://lorempixel.com/321/200/people",
"logo": "https://lorempixel.com/100/50/abstract"
}
],
"Sport": [
{
"id": 3,
"name": "charity4",
"sector": "Sport",
"year": 2016,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 50.5764627,
"longitude": 9.2230577,
"donations": 74000,
"image": "https://lorempixel.com/321/200/sport",
"logo": "https://lorempixel.com/100/50/abstract"
}
],
"Homeless": [
{
"id": 4,
"name": "charity5",
"sector": "Homeless",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.9500019,
"longitude": 7.4836722,
"donations": 60000,
"image": "https://lorempixel.com/321/200/city",
"logo": "https://lorempixel.com/100/50/abstract"
},
{
"id": 5,
"name": "charity6",
"sector": "Homeless",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 50.9500019,
"longitude": 6.4836722,
"donations": 60000,
"image": "https://lorempixel.com/321/200/city",
"logo": "https://lorempixel.com/100/50/abstract"
}
]
}
我认为我的过滤器是正确的，
const markerObject = filterObject[self.id];
const markerID = markerObject["id"];
mapMarkers.filter(marker => marker[0].id !== markerID);
但是当勾选复选框时，我得到了这个：
[
[
{
"id": 4,
"name": "charity5",
"sector": "Homeless",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.9500019,
"longitude": 7.4836722,
"donations": 60000,
"image": "https://lorempixel.com/321/200/city",
"logo": "https://lorempixel.com/100/50/abstract"
},
{
"id": 5,
"name": "charity6",
"sector": "Homeless",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 50.9500019,
"longitude": 6.4836722,
"donations": 60000,
"image": "https://lorempixel.com/321/200/city",
"logo": "https://lorempixel.com/100/50/abstract"
}
],
[
{
"id": 2,
"name": "charity3",
"sector": "Seniors",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.5413,
"longitude": 9.9158,
"donations": 70000,
"image": "https://lorempixel.com/321/200/people",
"logo": "https://lorempixel.com/100/50/abstract"
},
{
"id": 4,
"name": "charity5",
"sector": "Homeless",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 51.9500019,
"longitude": 7.4836722,
"donations": 60000,
"image": "https://lorempixel.com/321/200/city",
"logo": "https://lorempixel.com/100/50/abstract"
},
{
"id": 5,
"name": "charity6",
"sector": "Homeless",
"year": 2018,
"description": "lorem ipsum",
"address": "",
"Postleitzahl": "",
"bundesland": "",
"latitude": 50.9500019,
"longitude": 6.4836722,
"donations": 60000,
"image": "https://lorempixel.com/321/200/city",
"logo": "https://lorempixel.com/100/50/abstract"
}
]
]
正如您所看到的，有重复的条目，我认为它是由原始对象'filterObject'的形状引起的。
以下是整个代码https://codepen.io/sharperwebdev/pen/rdeeeY?editors=0011第266行至第302行
非常感谢任何帮助。
答案 0 :(得分：1)
您可以平展结果数组，然后使用带有闭包的Set来过滤重复项。
var array = [[{ id: 4, name: "charity5", sector: "Homeless", year: 2018, description: "lorem ipsum", address: "", Postleitzahl: "", bundesland: "", latitude: 51.9500019, longitude: 7.4836722, donations: 60000, image: "https://lorempixel.com/321/200/city", logo: "https://lorempixel.com/100/50/abstract" }, { id: 5, name: "charity6", sector: "Homeless", year: 2018, description: "lorem ipsum", address: "", Postleitzahl: "", bundesland: "", latitude: 50.9500019, longitude: 6.4836722, donations: 60000, image: "https://lorempixel.com/321/200/city", logo: "https://lorempixel.com/100/50/abstract" }], [{ id: 2, name: "charity3", sector: "Seniors", year: 2018, description: "lorem ipsum", address: "", Postleitzahl: "", bundesland: "", latitude: 51.5413, longitude: 9.9158, donations: 70000, image: "https://lorempixel.com/321/200/people", logo: "https://lorempixel.com/100/50/abstract" }, { id: 4, name: "charity5", sector: "Homeless", year: 2018, description: "lorem ipsum", address: "", Postleitzahl: "", bundesland: "", latitude: 51.9500019, longitude: 7.4836722, donations: 60000, image: "https://lorempixel.com/321/200/city", logo: "https://lorempixel.com/100/50/abstract" }, { id: 5, name: "charity6", sector: "Homeless", year: 2018, description: "lorem ipsum", address: "", Postleitzahl: "", bundesland: "", latitude: 50.9500019, longitude: 6.4836722, donations: 60000, image: "https://lorempixel.com/321/200/city", logo: "https://lorempixel.com/100/50/abstract" }]],
result = array
.reduce((r, a) => r.concat(a), [])
.filter((s => o => !s.has(o.id) && s.add(o.id))(new Set));
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }