typescript how to find inside an array that is already in an array?

Question

I want to find a value inside an array that is already inside an array.

To give an example of my array:

[
    {
        ConcessionId: 1,
        ConcessionName: "Coyotes",
        KnownAs: [
          {
            TeamId: 1,
            Name: "Arizona Coyotes",
          },
          {
            TeamId: 2,
            Name: "Phoenix Coyotes",
          }
        ]
    },
    {
        ConcessionId: 2,
        ConcessionName: "Devils",
        KnownAs: [
          {
            TeamId: 3,
            Name: "Colorado Rockies",
          },
          {
            TeamId: 4,
            Name: "New-Jersey Devils",
          }
        ]
    }
]

What I want is when Icall my function it returns me the team name. For example, I the parameter value is 3, I want Colorado Rockies as a name:

public getInfo(_TeamID) { 
    const concession: ConcessionInfo[] =  this.concessionList$.filter(function (x) {
      x.KnownAs.filter( (y)=> {
          y.TeamId= +_TeamID;
          return y.Name;
      })
    })

}

I try so many different way with filter. But never get something good. Never works.

I can make a double .foreach , for each array. but I think a better method exist than making a double loop.

Thanks

John · Accepted Answer · 2020-04-16 00:37:23Z

2

Instead of using the filter method (which is in fact working similar as a for loop), you could do forEach on both arrays. For your current data structure, there is no other way around it.

getInfo = (_TeamID) => {
  let teamName = '';
  this.concessionList$.forEach(entry => {
    entry.KnownAs.forEach(team => {
      if(team.TeamId === _TeamID){
        teamName = team.Name;
        return; // break the loop.
      }
    })
  });
  return teamName;
}

Here is a working example

https://stackblitz.com/edit/double-for-lopp

EDIT If you have a look at the polyfill implementation of filter from Mozilla https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter which is in equivalent to the native implementation of filter, you can see that it is looping through the whole array, the same way as a forEach loop. The difference is that the filter method will return a new array based on the boolean condition inside the callback function, while a forEach loop does not return anything.

edited Apr 16, 2020 at 0:37

answered Apr 16, 2020 at 0:26

John

11.6k5 gold badges60 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

baronming Over a year ago

Yes, like I though, I need to use a double loop. It works great. thanks.

Wong Jia Hau · Accepted Answer · 2020-04-16 10:31:39Z

1

Assuming myArray is contains the data you provided.

The following code will work if you're using Typescript 3.7 and above.

public getInfo(teamId: number): string | undefined {
    const team = this.concessionList$
      .map(concession => concession.KnownAs)
      .reduce((a, b) => a.concat(b), [])
      .find(team => team.TeamId === teamId)
    return team ? team.Name : undefined
}

Usage:

this.getInfo(3) // Colorado Rockies

Ok how this work?

You have to understand what is find. For example:

const result = [{name: 'foo', age: 1}, {name: 'bar', age: 2}]
    .find(people => people.name === 'foo')


console.log(result) // {name: 'foo', age: 1}

edited Apr 16, 2020 at 10:31

answered Apr 16, 2020 at 3:22

Wong Jia Hau

3,1792 gold badges25 silver badges41 bronze badges

2 Comments

baronming Over a year ago

Man, your solution was what I was searching. Unfortunately, the flatmap was not working even if I add an import of mergemap. I also try to replace it with map. But after another error saying, team.TeamId was not recognize. Sad that you solution didn't work for me.

Wong Jia Hau Over a year ago

@baronming I've updated the solution to something that might be compatible with your Javascript version, do you want to try it out?

Collectives™ on Stack Overflow

typescript how to find inside an array that is already in an array?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related