kandi background
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
Explore all Xiaomi open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Xiaomi

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

Popular Libraries in Xiaomi

Trending New libraries in Xiaomi

Top Authors in Xiaomi

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

Trending Kits in Xiaomi

No Trending Kits are available at this moment for Xiaomi

Trending Discussions on Xiaomi

    Filtering property of type array on an array of objects by using another array
    OAuth2 Redirect URI not valid
    Get the documents of order id 1 that are not in order id 2 MongoDB
    How to make completely transparent status bar?
    SQL Subquery with OR condition
    Service not registered: com.microsoft.identity.common.internal.ui.browser.CustomTabsManager$1@4af7a6e
    Why doesn't the data from the server come to the app on the real device?
    New instance of a class contains older data given to an older instance
    java.lang.IncompatibleClassChangeError,After Upgrade kotlin gradle plugin to 1.5.20
    Will i get the entire document from the firestore?

QUESTION

Filtering property of type array on an array of objects by using another array

Asked 2022-Mar-21 at 22:11

I 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:11

You could filter the linksArray array based on checking if linksArray.aces array items exist in valuesAces as follows:

copy icondownload icon

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:

copy icondownload icon

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:

copy icondownload icon

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:

copy icondownload icon

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)

Source https://stackoverflow.com/questions/71558909

Community Discussions contain sources that include Stack Exchange Network

    Filtering property of type array on an array of objects by using another array
    OAuth2 Redirect URI not valid
    Get the documents of order id 1 that are not in order id 2 MongoDB
    How to make completely transparent status bar?
    SQL Subquery with OR condition
    Service not registered: com.microsoft.identity.common.internal.ui.browser.CustomTabsManager$1@4af7a6e
    Why doesn't the data from the server come to the app on the real device?
    New instance of a class contains older data given to an older instance
    java.lang.IncompatibleClassChangeError,After Upgrade kotlin gradle plugin to 1.5.20
    Will i get the entire document from the firestore?

QUESTION

Filtering property of type array on an array of objects by using another array

Asked 2022-Mar-21 at 22:11

I 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:11

You could filter the linksArray array based on checking if linksArray.aces array items exist in valuesAces as follows:

copy icondownload icon

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:

copy icondownload icon

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:

copy icondownload icon

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:

copy icondownload icon

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)

Source https://stackoverflow.com/questions/71558909