这看起来比实际大得多，只是使问题看起来很大的对象。但我认为你需要看到整个事物的形状
我对我的对象的形状有一点疑问。当我单击复选框时，它会过滤对象以根据项目的 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 行
如有任何帮助，我们将不胜感激。
最佳答案
您可以展平结果数组，然后使用 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; }关于javascript - 连接多级对象以进行过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49295893/