typescript What is the best approach to searching within a nested array?

Question

typescript What is the best approach to searching within a nested array?

I am struggling to extract a specific value from a nested array within an array.

Here is an example structure 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",
          }
        ]
    }
]

I need help with writing a function that will return the team name based on a provided parameter. For instance, if the parameter value is 3, I expect the function to return "Colorado Rockies":

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

}

I have tried using filters in various ways but couldn't achieve the desired result. It seems like there should be a more efficient way than using nested loops.

Any suggestions would be greatly appreciated. Thank you!

arrays typescript filter find

Answer 1

Answer №1

Instead of utilizing the filter method (which essentially functions similarly to a for loop), you could opt to use forEach on both arrays. Given your current data structure, there seems to be no alternative way around it.

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

Here is an example that shows the solution in action:

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

EDIT Upon examining the polyfill implementation of filter from Mozilla https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter, which mimics the native implementation of filter, it's evident that it loops through the entire array much like a forEach loop. The distinction lies in the fact that the filter method generates a new array based on the boolean condition within the callback function, while a forEach loop does not yield any output.

Answer 2

Instead of utilizing the filter method (which essentially functions similarly to a for loop), you could opt to use forEach on both arrays. Given your current data structure, there seems to be no alternative way around it.

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

Here is an example that shows the solution in action:

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

EDIT Upon examining the polyfill implementation of filter from Mozilla https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter, which mimics the native implementation of filter, it's evident that it loops through the entire array much like a forEach loop. The distinction lies in the fact that the filter method generates a new array based on the boolean condition within the callback function, while a forEach loop does not yield any output.

Answer 3

Answer №2

If you have an array called myArray that contains the provided data, the code snippet below will be compatible with Typescript versions 3.7 and above.

public retrieveInfo(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
}

How to use:

this.retrieveInfo(3) // Output: Colorado Rockies

But how does this actually work?

To understand this, let's consider what find does. For example:

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

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

Answer 4

If you have an array called myArray that contains the provided data, the code snippet below will be compatible with Typescript versions 3.7 and above.

public retrieveInfo(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
}

How to use:

this.retrieveInfo(3) // Output: Colorado Rockies

But how does this actually work?

To understand this, let's consider what find does. For example:

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

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

typescript What is the best approach to searching within a nested array?

Answer №1

Answer №2

Similar questions

Dependency management with various versions of an NPM package

Typescript: Subscribed information mysteriously disappeared

Is it possible to retrieve data from numerous tables and consolidate it all into a single array?

Typescript struggles to identify properties that have no business being there

What are some ways to retrieve a summary of an Angular FormArray containing controls?

Creating a Typescript HttpInterceptor and ensuring its compatibility with minification techniques

Having trouble changing the query string in the URL with Angular 4?

In TypeScript/Angular, what is the best way to share model variables between a Service class and a controller class?

The "ng2-CKEditor" package is experiencing compatibility issues with TypeScript in Angular 2

Steps to Turn Off Angular 2 Material Input Field

Tips for iterating over an array that implements either of two interfaces in TypeScript

Bringing in the typescript 4 package to use in typescript version 3.8.3

Could a tslint rule be implemented in Typescript classes to ensure method return types are enforced?

Obtaining attribute data value upon selection change in Angular 4

Angular : Is toFixed() functioning properly with one value but not with the other one?

What is the process for creating a class in TypeScript?

Can the data cells of columns be dynamically adjusted to align them on a single vertical line?

A different approach to handling multiple constructors in Angular 4

Scrolling through a list in Angular using cdk-virtual-scroll-viewport while selecting items via keyboard input

Create a tuple type that encompasses all possible paths within a recursive object configuration