Popular Releases
Popular Libraries
New Libraries
Top Authors
Trending Kits
Trending Discussions
Learning
Valetudo 2022.03.1 | |
Xiaomi ADB/Fastboot Tools 7.0.3 | |
0.5.11 | |
0.3.7.20210106.1425051 | |
Release 76 |
Valetudo Valetudo 2022.03.1 |
XiaomiADBFastbootTools Xiaomi ADB/Fastboot Tools 7.0.3 |
python-miio 0.5.11 |
MiPushFramework 0.3.7.20210106.1425051 |
ATC_MiThermometer Release 76 |
1
23 Libraries
219
2
21 Libraries
233
3
16 Libraries
824
4
12 Libraries
66
5
10 Libraries
236
6
9 Libraries
66
7
9 Libraries
1510
8
8 Libraries
1220
9
8 Libraries
72
10
6 Libraries
599
1
23 Libraries
219
2
21 Libraries
233
3
16 Libraries
824
4
12 Libraries
66
5
10 Libraries
236
6
9 Libraries
66
7
9 Libraries
1510
8
8 Libraries
1220
9
8 Libraries
72
10
6 Libraries
599
No Trending Kits are available at this moment for Xiaomi
QUESTION
Filtering property of type array on an array of objects by using another array
Asked 2022-Mar-21 at 22:11I have an array of objects that needs to be filtered by using two menus. Each menu returns an array. The values of these arrays will be used to filter the object array.
I have created a codepen example here : https://codepen.io/jonathank2018/pen/LYeZgQG?editors=1010
For this example lets concentrate on the "Aces" menu only. The filtering logic that i am trying to make is the following. scenario 1 : When I select "Services" from the "Aces" menu, the value of "valuesAces" becomes ["Services"]. scenario 2 : When I select "Services" and "Connected" from the "Aces" menu, the value of "valuesAces" becomes ["Services","Connected"]. When I filter "linksArray" with the values returned from "valuesAces", I need the result to be an array with all the objects that have within their aces property at least one of the items in "valuesAces".
for scenario 1 , I expect as result all the objects that have as their aces property ["Services"] as unique value, and ["Services", "othervalues...","othervalues..."].
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10
for scenario 2 , I expect as result all the objects that have as their aces property ["Services"] , or ["Services", "othervalues...","othervalues..."], or ["Connected"], or ["Services", "Connected","othervalues..."], or ["Connected","othervalues..."].
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21
If the object's aces property has at least one or several values from valuesAces, then it needs to be in the result of the filter.
The problem I am currently facing with my codepen example, is that it is not filtering the way I want it to. Right now if i refer to scenario 2, in the result I only find the objects that have as aces property either "Services" or "Connected" as first item of the array , but not the objects that have several items in the aces property and where "Services" or "Connected" are not at index 0. It seems to ignore all other items in the array exept for the first one.
My filtering function looks like this :
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41
ANSWER
Answered 2022-Mar-21 at 22:11You could filter the linksArray
array based on checking if linksArray.aces
array items exist in valuesAces
as follows:
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41// Filter linksArray
42linksArray.filter((item) => {
43 return item.aces
44 // 'aces' values in provided codepen has spaces so trim those.
45 // If actual data doesn't have spaces, this map can be removed.
46 .map((i) => {
47 return i.trim()
48 })
49 // Check if 'acesValues' are in 'linksArray.aces' array
50 .some((v) => {
51 return valuesAces.includes(v)
52 })
53})
54
Or as a one liner:
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41// Filter linksArray
42linksArray.filter((item) => {
43 return item.aces
44 // 'aces' values in provided codepen has spaces so trim those.
45 // If actual data doesn't have spaces, this map can be removed.
46 .map((i) => {
47 return i.trim()
48 })
49 // Check if 'acesValues' are in 'linksArray.aces' array
50 .some((v) => {
51 return valuesAces.includes(v)
52 })
53})
54linksArray.filter((item) => item.aces.map((i) => i.trim()).some((v) => acesValues.includes(v)))
55
Here is an example:
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41// Filter linksArray
42linksArray.filter((item) => {
43 return item.aces
44 // 'aces' values in provided codepen has spaces so trim those.
45 // If actual data doesn't have spaces, this map can be removed.
46 .map((i) => {
47 return i.trim()
48 })
49 // Check if 'acesValues' are in 'linksArray.aces' array
50 .some((v) => {
51 return valuesAces.includes(v)
52 })
53})
54linksArray.filter((item) => item.aces.map((i) => i.trim()).some((v) => acesValues.includes(v)))
55let linksArray = [
56 { src: 'SemiDrive', target: 'ADAYO', aces: ['Automated', ' Experience'], topic: ['EE_Architecture'] },
57 { src: 'WayRay', target: 'AGP', aces: ['Services'], topic: ['Map_Localisation'] },
58 { src: 'Hesai', target: 'Aiways', aces: ['Automated'], topic: ['Car_Access'] },
59 { src: 'Oxbotica', target: 'AppliedEV', aces: ['Automated'], topic: ['Regulation'] },
60 { src: 'Great_Wall', target: 'Audi', aces: ['Automated', ' Connected', ' Experience', ' Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
61 { src: 'Audi', target: 'BMW', aces: ['Automated', ' Connected', ' Experience', ' Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
62 { src: 'AEye', target: 'Benchmark', aces: ['Automated'], topic: [] },
63 { src: 'Hesai', target: 'Black_Sesame', aces: ['Automated', ' Connected'], topic: ['AV_Driverless'] },
64 { src: 'FAW', target: 'Cambricon', aces: ['Automated'], topic: ['AS_ADAS_uptoL2+'] },
65 { src: 'GM', target: 'Cruise', aces: ['Automated', ' Services'], topic: ['AV_Driverless'] },
66 { src: 'Honda', target: 'Cruise', aces: ['Automated', ' Services'], topic: ['Parking'] },
67 { src: 'Audi', target: 'Daimler', aces: ['Services', ' Connected', ' Experience'], topic: ['AP', ' AVP', ' Infrastructure'] },
68 { src: 'Xiaomi', target: 'Deepmotion', aces: ['Automated', ' Services'], topic: ['ADAS_uptoL2+', ' AVP'] },
69 { src: 'Alibaba', target: 'Deeproute', aces: ['Automated'], topic: ['AD_Driverless'] },
70 { src: 'BMW', target: 'Deutsche_Telekom', aces: ['Connected'], topic: ['E/E_Architecture'] }
71]
72
73let acesValues1 = ['Services']
74let acesValues2 = ['Services', 'Connected']
75
76const filterLinks = (links, aces) =>
77 links.filter((item) => item.aces.map((i) => i.trim()).some((v) => aces.includes(v)))
78
79console.log(filterLinks(linksArray, acesValues1))
80console.log(filterLinks(linksArray, acesValues2))
EDIT
Based on OP's comments, removed leading spaces from linksArray.aces
values and added the topics filter:
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41// Filter linksArray
42linksArray.filter((item) => {
43 return item.aces
44 // 'aces' values in provided codepen has spaces so trim those.
45 // If actual data doesn't have spaces, this map can be removed.
46 .map((i) => {
47 return i.trim()
48 })
49 // Check if 'acesValues' are in 'linksArray.aces' array
50 .some((v) => {
51 return valuesAces.includes(v)
52 })
53})
54linksArray.filter((item) => item.aces.map((i) => i.trim()).some((v) => acesValues.includes(v)))
55let linksArray = [
56 { src: 'SemiDrive', target: 'ADAYO', aces: ['Automated', ' Experience'], topic: ['EE_Architecture'] },
57 { src: 'WayRay', target: 'AGP', aces: ['Services'], topic: ['Map_Localisation'] },
58 { src: 'Hesai', target: 'Aiways', aces: ['Automated'], topic: ['Car_Access'] },
59 { src: 'Oxbotica', target: 'AppliedEV', aces: ['Automated'], topic: ['Regulation'] },
60 { src: 'Great_Wall', target: 'Audi', aces: ['Automated', ' Connected', ' Experience', ' Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
61 { src: 'Audi', target: 'BMW', aces: ['Automated', ' Connected', ' Experience', ' Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
62 { src: 'AEye', target: 'Benchmark', aces: ['Automated'], topic: [] },
63 { src: 'Hesai', target: 'Black_Sesame', aces: ['Automated', ' Connected'], topic: ['AV_Driverless'] },
64 { src: 'FAW', target: 'Cambricon', aces: ['Automated'], topic: ['AS_ADAS_uptoL2+'] },
65 { src: 'GM', target: 'Cruise', aces: ['Automated', ' Services'], topic: ['AV_Driverless'] },
66 { src: 'Honda', target: 'Cruise', aces: ['Automated', ' Services'], topic: ['Parking'] },
67 { src: 'Audi', target: 'Daimler', aces: ['Services', ' Connected', ' Experience'], topic: ['AP', ' AVP', ' Infrastructure'] },
68 { src: 'Xiaomi', target: 'Deepmotion', aces: ['Automated', ' Services'], topic: ['ADAS_uptoL2+', ' AVP'] },
69 { src: 'Alibaba', target: 'Deeproute', aces: ['Automated'], topic: ['AD_Driverless'] },
70 { src: 'BMW', target: 'Deutsche_Telekom', aces: ['Connected'], topic: ['E/E_Architecture'] }
71]
72
73let acesValues1 = ['Services']
74let acesValues2 = ['Services', 'Connected']
75
76const filterLinks = (links, aces) =>
77 links.filter((item) => item.aces.map((i) => i.trim()).some((v) => aces.includes(v)))
78
79console.log(filterLinks(linksArray, acesValues1))
80console.log(filterLinks(linksArray, acesValues2))let linksArray = [
81 { src: 'SemiDrive', target: 'ADAYO', aces: ['Automated', 'Experience'], topic: ['EE_Architecture'] },
82 { src: 'WayRay', target: 'AGP', aces: ['Services'], topic: ['Map_Localisation'] },
83 { src: 'Hesai', target: 'Aiways', aces: ['Automated'], topic: ['Car_Access'] },
84 { src: 'Oxbotica', target: 'AppliedEV', aces: ['Automated'], topic: ['Regulation'] },
85 { src: 'Great_Wall', target: 'Audi', aces: ['Automated', 'Connected', 'Experience', 'Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
86 { src: 'Audi', target: 'BMW', aces: ['Automated', 'Connected', 'Experience', 'Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
87 { src: 'AEye', target: 'Benchmark', aces: ['Automated'], topic: [] },
88 { src: 'Hesai', target: 'Black_Sesame', aces: ['Automated', 'Connected'], topic: ['AV_Driverless'] },
89 { src: 'FAW', target: 'Cambricon', aces: ['Automated'], topic: ['AS_ADAS_uptoL2+'] },
90 { src: 'GM', target: 'Cruise', aces: ['Automated', 'Services'], topic: ['AV_Driverless'] },
91 { src: 'Honda', target: 'Cruise', aces: ['Automated', 'Services'], topic: ['Parking'] },
92 { src: 'Audi', target: 'Daimler', aces: ['Services', 'Connected', 'Experience'], topic: ['AP', ' AVP', ' Infrastructure'] },
93 { src: 'Xiaomi', target: 'Deepmotion', aces: ['Automated', 'Services'], topic: ['ADAS_uptoL2+', 'AVP'] },
94 { src: 'Alibaba', target: 'Deeproute', aces: ['Automated'], topic: ['AD_Driverless'] },
95 { src: 'BMW', target: 'Deutsche_Telekom', aces: ['Connected'], topic: ['E/E_Architecture'] }
96]
97
98let aces = ['Services']
99let topics = ['ADAS_uptoL2+']
100
101const filterLinks = (links, aces, topics) =>
102 links
103 .filter((item) => item.aces.some((v) => (aces.length ? aces.includes(v) : v)))
104 .filter((item) => item.topic.some((v) => (topics.length ? topics.includes(v) : v)))
105
106let result = filterLinks(linksArray, aces, topics)
107
108console.log(result)
Community Discussions contain sources that include Stack Exchange Network
QUESTION
Filtering property of type array on an array of objects by using another array
Asked 2022-Mar-21 at 22:11I have an array of objects that needs to be filtered by using two menus. Each menu returns an array. The values of these arrays will be used to filter the object array.
I have created a codepen example here : https://codepen.io/jonathank2018/pen/LYeZgQG?editors=1010
For this example lets concentrate on the "Aces" menu only. The filtering logic that i am trying to make is the following. scenario 1 : When I select "Services" from the "Aces" menu, the value of "valuesAces" becomes ["Services"]. scenario 2 : When I select "Services" and "Connected" from the "Aces" menu, the value of "valuesAces" becomes ["Services","Connected"]. When I filter "linksArray" with the values returned from "valuesAces", I need the result to be an array with all the objects that have within their aces property at least one of the items in "valuesAces".
for scenario 1 , I expect as result all the objects that have as their aces property ["Services"] as unique value, and ["Services", "othervalues...","othervalues..."].
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10
for scenario 2 , I expect as result all the objects that have as their aces property ["Services"] , or ["Services", "othervalues...","othervalues..."], or ["Connected"], or ["Services", "Connected","othervalues..."], or ["Connected","othervalues..."].
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21
If the object's aces property has at least one or several values from valuesAces, then it needs to be in the result of the filter.
The problem I am currently facing with my codepen example, is that it is not filtering the way I want it to. Right now if i refer to scenario 2, in the result I only find the objects that have as aces property either "Services" or "Connected" as first item of the array , but not the objects that have several items in the aces property and where "Services" or "Connected" are not at index 0. It seems to ignore all other items in the array exept for the first one.
My filtering function looks like this :
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41
ANSWER
Answered 2022-Mar-21 at 22:11You could filter the linksArray
array based on checking if linksArray.aces
array items exist in valuesAces
as follows:
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41// Filter linksArray
42linksArray.filter((item) => {
43 return item.aces
44 // 'aces' values in provided codepen has spaces so trim those.
45 // If actual data doesn't have spaces, this map can be removed.
46 .map((i) => {
47 return i.trim()
48 })
49 // Check if 'acesValues' are in 'linksArray.aces' array
50 .some((v) => {
51 return valuesAces.includes(v)
52 })
53})
54
Or as a one liner:
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41// Filter linksArray
42linksArray.filter((item) => {
43 return item.aces
44 // 'aces' values in provided codepen has spaces so trim those.
45 // If actual data doesn't have spaces, this map can be removed.
46 .map((i) => {
47 return i.trim()
48 })
49 // Check if 'acesValues' are in 'linksArray.aces' array
50 .some((v) => {
51 return valuesAces.includes(v)
52 })
53})
54linksArray.filter((item) => item.aces.map((i) => i.trim()).some((v) => acesValues.includes(v)))
55
Here is an example:
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41// Filter linksArray
42linksArray.filter((item) => {
43 return item.aces
44 // 'aces' values in provided codepen has spaces so trim those.
45 // If actual data doesn't have spaces, this map can be removed.
46 .map((i) => {
47 return i.trim()
48 })
49 // Check if 'acesValues' are in 'linksArray.aces' array
50 .some((v) => {
51 return valuesAces.includes(v)
52 })
53})
54linksArray.filter((item) => item.aces.map((i) => i.trim()).some((v) => acesValues.includes(v)))
55let linksArray = [
56 { src: 'SemiDrive', target: 'ADAYO', aces: ['Automated', ' Experience'], topic: ['EE_Architecture'] },
57 { src: 'WayRay', target: 'AGP', aces: ['Services'], topic: ['Map_Localisation'] },
58 { src: 'Hesai', target: 'Aiways', aces: ['Automated'], topic: ['Car_Access'] },
59 { src: 'Oxbotica', target: 'AppliedEV', aces: ['Automated'], topic: ['Regulation'] },
60 { src: 'Great_Wall', target: 'Audi', aces: ['Automated', ' Connected', ' Experience', ' Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
61 { src: 'Audi', target: 'BMW', aces: ['Automated', ' Connected', ' Experience', ' Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
62 { src: 'AEye', target: 'Benchmark', aces: ['Automated'], topic: [] },
63 { src: 'Hesai', target: 'Black_Sesame', aces: ['Automated', ' Connected'], topic: ['AV_Driverless'] },
64 { src: 'FAW', target: 'Cambricon', aces: ['Automated'], topic: ['AS_ADAS_uptoL2+'] },
65 { src: 'GM', target: 'Cruise', aces: ['Automated', ' Services'], topic: ['AV_Driverless'] },
66 { src: 'Honda', target: 'Cruise', aces: ['Automated', ' Services'], topic: ['Parking'] },
67 { src: 'Audi', target: 'Daimler', aces: ['Services', ' Connected', ' Experience'], topic: ['AP', ' AVP', ' Infrastructure'] },
68 { src: 'Xiaomi', target: 'Deepmotion', aces: ['Automated', ' Services'], topic: ['ADAS_uptoL2+', ' AVP'] },
69 { src: 'Alibaba', target: 'Deeproute', aces: ['Automated'], topic: ['AD_Driverless'] },
70 { src: 'BMW', target: 'Deutsche_Telekom', aces: ['Connected'], topic: ['E/E_Architecture'] }
71]
72
73let acesValues1 = ['Services']
74let acesValues2 = ['Services', 'Connected']
75
76const filterLinks = (links, aces) =>
77 links.filter((item) => item.aces.map((i) => i.trim()).some((v) => aces.includes(v)))
78
79console.log(filterLinks(linksArray, acesValues1))
80console.log(filterLinks(linksArray, acesValues2))
EDIT
Based on OP's comments, removed leading spaces from linksArray.aces
values and added the topics filter:
1scenario1 = [ // services selected
2 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
3 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
4 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
5 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
6 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
7 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
8 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
9 ]
10 let scenario2 = [ //services and connected selected
11 { "src": "WayRay", "target": "AGP", "aces": [ "Services" ], "topic": [ "Map_Localisation" ] },
12 { "src": "Great_Wall", "target": "Audi", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
13 { "src": "Audi", "target": "BMW", "aces": [ "Automated", " Connected", " Experience", " Services" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
14 { "src": "Hesai", "target": "Black_Sesame", "aces": [ "Automated", " Connected" ], "topic": [ "AV_Driverless" ] },
15 { "src": "GM", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "AV_Driverless" ] },
16 { "src": "Honda", "target": "Cruise", "aces": [ "Automated", " Services" ], "topic": [ "Parking" ] },
17 { "src": "Audi", "target": "Daimler", "aces": [ "Services", " Connected", " Experience" ], "topic": [ "AP", " AVP", " Infrastructure" ] },
18 { "src": "Xiaomi", "target": "Deepmotion", "aces": [ "Automated", " Services" ], "topic": [ "ADAS_uptoL2+", " AVP" ] },
19 { "src": "BMW", "target": "Deutsche_Telekom", "aces": [ "Connected" ], "topic": [ "E/E_Architecture" ] },
20 ]
21filteredLinks: function(){
22 console.log("1")
23 let result
24 if(this.linksArray){
25 if(
26 (!this.valuesTopic || this.valuesTopic.length == 0) // by topic
27 && (!this.valuesAces || this.valuesAces.length == 0) // by ACES
28 ){
29 console.log("2")
30 result = this.linksArray
31 }else{
32 console.log("3")
33 result = this.linksArray.filter(link => { return (
34 ( !this.valuesTopic || this.valuesTopic.length == 0 || ([...link.topic].some(topic => this.valuesTopic.includes(topic)))) // by topic
35 &&( !this.valuesAces || this.valuesAces.length == 0 || ([...link.aces].some(ace => this.valuesAces.includes(ace)))) // by ACES
36 )})
37 }
38 return result;
39 }
40 },
41// Filter linksArray
42linksArray.filter((item) => {
43 return item.aces
44 // 'aces' values in provided codepen has spaces so trim those.
45 // If actual data doesn't have spaces, this map can be removed.
46 .map((i) => {
47 return i.trim()
48 })
49 // Check if 'acesValues' are in 'linksArray.aces' array
50 .some((v) => {
51 return valuesAces.includes(v)
52 })
53})
54linksArray.filter((item) => item.aces.map((i) => i.trim()).some((v) => acesValues.includes(v)))
55let linksArray = [
56 { src: 'SemiDrive', target: 'ADAYO', aces: ['Automated', ' Experience'], topic: ['EE_Architecture'] },
57 { src: 'WayRay', target: 'AGP', aces: ['Services'], topic: ['Map_Localisation'] },
58 { src: 'Hesai', target: 'Aiways', aces: ['Automated'], topic: ['Car_Access'] },
59 { src: 'Oxbotica', target: 'AppliedEV', aces: ['Automated'], topic: ['Regulation'] },
60 { src: 'Great_Wall', target: 'Audi', aces: ['Automated', ' Connected', ' Experience', ' Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
61 { src: 'Audi', target: 'BMW', aces: ['Automated', ' Connected', ' Experience', ' Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
62 { src: 'AEye', target: 'Benchmark', aces: ['Automated'], topic: [] },
63 { src: 'Hesai', target: 'Black_Sesame', aces: ['Automated', ' Connected'], topic: ['AV_Driverless'] },
64 { src: 'FAW', target: 'Cambricon', aces: ['Automated'], topic: ['AS_ADAS_uptoL2+'] },
65 { src: 'GM', target: 'Cruise', aces: ['Automated', ' Services'], topic: ['AV_Driverless'] },
66 { src: 'Honda', target: 'Cruise', aces: ['Automated', ' Services'], topic: ['Parking'] },
67 { src: 'Audi', target: 'Daimler', aces: ['Services', ' Connected', ' Experience'], topic: ['AP', ' AVP', ' Infrastructure'] },
68 { src: 'Xiaomi', target: 'Deepmotion', aces: ['Automated', ' Services'], topic: ['ADAS_uptoL2+', ' AVP'] },
69 { src: 'Alibaba', target: 'Deeproute', aces: ['Automated'], topic: ['AD_Driverless'] },
70 { src: 'BMW', target: 'Deutsche_Telekom', aces: ['Connected'], topic: ['E/E_Architecture'] }
71]
72
73let acesValues1 = ['Services']
74let acesValues2 = ['Services', 'Connected']
75
76const filterLinks = (links, aces) =>
77 links.filter((item) => item.aces.map((i) => i.trim()).some((v) => aces.includes(v)))
78
79console.log(filterLinks(linksArray, acesValues1))
80console.log(filterLinks(linksArray, acesValues2))let linksArray = [
81 { src: 'SemiDrive', target: 'ADAYO', aces: ['Automated', 'Experience'], topic: ['EE_Architecture'] },
82 { src: 'WayRay', target: 'AGP', aces: ['Services'], topic: ['Map_Localisation'] },
83 { src: 'Hesai', target: 'Aiways', aces: ['Automated'], topic: ['Car_Access'] },
84 { src: 'Oxbotica', target: 'AppliedEV', aces: ['Automated'], topic: ['Regulation'] },
85 { src: 'Great_Wall', target: 'Audi', aces: ['Automated', 'Connected', 'Experience', 'Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
86 { src: 'Audi', target: 'BMW', aces: ['Automated', 'Connected', 'Experience', 'Services'], topic: ['AP', ' AVP', ' Infrastructure'] },
87 { src: 'AEye', target: 'Benchmark', aces: ['Automated'], topic: [] },
88 { src: 'Hesai', target: 'Black_Sesame', aces: ['Automated', 'Connected'], topic: ['AV_Driverless'] },
89 { src: 'FAW', target: 'Cambricon', aces: ['Automated'], topic: ['AS_ADAS_uptoL2+'] },
90 { src: 'GM', target: 'Cruise', aces: ['Automated', 'Services'], topic: ['AV_Driverless'] },
91 { src: 'Honda', target: 'Cruise', aces: ['Automated', 'Services'], topic: ['Parking'] },
92 { src: 'Audi', target: 'Daimler', aces: ['Services', 'Connected', 'Experience'], topic: ['AP', ' AVP', ' Infrastructure'] },
93 { src: 'Xiaomi', target: 'Deepmotion', aces: ['Automated', 'Services'], topic: ['ADAS_uptoL2+', 'AVP'] },
94 { src: 'Alibaba', target: 'Deeproute', aces: ['Automated'], topic: ['AD_Driverless'] },
95 { src: 'BMW', target: 'Deutsche_Telekom', aces: ['Connected'], topic: ['E/E_Architecture'] }
96]
97
98let aces = ['Services']
99let topics = ['ADAS_uptoL2+']
100
101const filterLinks = (links, aces, topics) =>
102 links
103 .filter((item) => item.aces.some((v) => (aces.length ? aces.includes(v) : v)))
104 .filter((item) => item.topic.some((v) => (topics.length ? topics.includes(v) : v)))
105
106let result = filterLinks(linksArray, aces, topics)
107
108console.log(result)