Javascript 连接多级对象以进行筛选
这看起来比实际要大得多，只是物体让问题看起来更大。但我认为你需要了解整个事情的情况 我的物体的形状有点问题。当我单击复选框时，它会根据项目的id过滤对象以返回唯一的条目。正在筛选的对象是两个数组和扇区的赋值Javascript 连接多级对象以进行筛选,javascript,arrays,json,object,Javascript,Arrays,Json,Object,这看起来比实际要大得多，只是物体让问题看起来更大。但我认为你需要了解整个事情的情况 我的物体的形状有点问题。当我单击复选框时，它会根据项目的id过滤对象以返回唯一的条目。正在筛选的对象是两个数组和扇区的赋值 const filterObject = {...years, ...sectors}; 看起来是这样的： filterObject = { "2016": [ { "id": 0, "name": "charity1", "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"
}
]
]
任何帮助都将不胜感激 您可以将结果数组平坦化，然后通过使用with闭包过滤掉重复项
var数组=[{id:4，名称：“charity5”，扇区：“无家可归者”，年份：2018，描述：“lorem ipsum”，地址：，Postleitzahl:，bundesland:，纬度：51.9500019，经度：7.4836722，捐款：60000，图片：“https://lorempixel.com/321/200/city，徽标：https://lorempixel.com/100/50/abstract“}，{id:5，名称：“慈善机构6”，部门：“无家可归者”，年份：2018年，描述：“lorem ipsum”，地址：，Postleitzahl:，邦德斯兰：，纬度：50.9500019，经度：6.4836722，捐款：60000，图片：https://lorempixel.com/321/200/city，徽标：https://lorempixel.com/100/50/abstract“}]，{id:2，名称：“慈善3”，部门：“老年人”，年份：2018年，描述：“lorem ipsum，地址：，Postleitzahl:，德国，纬度：51.5413，经度：9.9158，捐款：70000，图片：https://lorempixel.com/321/200/people，徽标：https://lorempixel.com/100/50/abstract“}，{id:4，名称：“慈善机构5”，部门：“无家可归者”，年份：2018年，描述：“lorem ipsum”，地址：“，Postleitzahl:”，邦德斯兰：“，纬度：51.9500019，经度：7.4836722，捐款：60000，图片：“https://lorempixel.com/321/200/city，徽标：https://lorempixel.com/100/50/abstract“}，{id:5，名称：“慈善机构6”，部门：“无家可归者”，年份：2018年，描述：“lorem ipsum”，地址：“，Postleitzahl:”，邦德斯兰：“，纬度：50.9500019，经度：6.4836722，捐款：60000，图片：“https://lorempixel.com/321/200/city，徽标：https://lorempixel.com/100/50/abstract" }]],
结果=数组
.减少（（r，a）=>r.concat（a），[]）
.filter（（s=>o=>！s.has（o.id）和&s.add（o.id））（新集合））；
控制台日志（结果）
.as控制台包装{max height:100%！important；top:0；}
年份是否包含与扇区相同的数据？有点像。API中有一个大对象，它被分成两个对象。每个新对象按年份或扇区分组。并非所有部门都有相同的年度信息，也并非所有年份都有相同的部门。年份和扇区对象用于动态创建复选框，以便按年份或扇区进行筛选。然后我将它们组合在一起，从复选框中筛选出来……这有意义吗？太棒了！谢谢Nina，它工作得很好，我不能完全理解过滤器中发生了什么，我需要把它分开，以便更好地理解。谢谢，这正是我需要的（o=>！s.has（o.id）和&s.add（o.id））id