Is it considered bad form to utilize nearly identical for loops in two separate instances within Angular 6?

Question

Is it considered bad form to utilize nearly identical for loops in two separate instances within Angular 6?

I am working on creating two lists for a roster.

The first list will display the current members of this year, while the second list will show if individuals have been excused for this year.

After analyzing my code, I realized that I am using two identical for loops, one to display all true Boolean values and another for false. Is there a more efficient way (a method perhaps) to showcase people who are both excused and not excused?

<h2>Roster {{year-1}}-{{year}}</h2>

<div *ngFor="let k of peoples">
  <div *ngFor="let a of k.people; let j = index">
    <div *ngIf="k.year == year && k.people[j].excused == false">
      {{k.people[j].firstName}} {{k.people[j].lastName}}
    </div>
  </div>
</div>

<h2>Excused</h2>

<div *ngFor="let k of peoples">
  <div *ngFor="let a of k.people; let j = index">
    <div *ngIf="k.year == year && k.people[j].excused == true">
      {{k.people[j].firstName}} {{k.people[j].lastName}}
    </div>
  </div>
</div>

angular typescript

Answer 1

Answer №1

Opting for this approach instead of adding an additional *ngIf would be more efficient.

It is suggested in the comments to create separate arrays for data within the component and perform the filtering operation after data updates. However, considering the unknown context of usage, this seems like a more suitable solution. It is advisable to avoid using *ngIf by filtering the data directly in the array to prevent unnecessary workload on another structural directive in the template. This will always result in performance advantages.

In your component, you can define a filter function:

getExcused(isExcused: boolean) {
    return this.peoples
        .filter(person => person.year === this.year)
        .map(person => person.people)
        .filter(p => p.excused === isExcused);
}

Then in the template:

<h2>Roster {{year-1}}-{{year}}</h2>
<div *ngFor="let individual of getExcused(false)">
    {{ individual.firstName }} {{ individual.lastName }}
</div>
<h2>Excused</h2>
<div *ngFor="let person of getExcused(true)">
    {{ person.firstName }} {{ person.lastName }}
</div>

If your component utilizes the change detection strategy on push, it should not pose any performance issues.

Answer 2

Opting for this approach instead of adding an additional *ngIf would be more efficient.

It is suggested in the comments to create separate arrays for data within the component and perform the filtering operation after data updates. However, considering the unknown context of usage, this seems like a more suitable solution. It is advisable to avoid using *ngIf by filtering the data directly in the array to prevent unnecessary workload on another structural directive in the template. This will always result in performance advantages.

In your component, you can define a filter function:

getExcused(isExcused: boolean) {
    return this.peoples
        .filter(person => person.year === this.year)
        .map(person => person.people)
        .filter(p => p.excused === isExcused);
}

Then in the template:

<h2>Roster {{year-1}}-{{year}}</h2>
<div *ngFor="let individual of getExcused(false)">
    {{ individual.firstName }} {{ individual.lastName }}
</div>
<h2>Excused</h2>
<div *ngFor="let person of getExcused(true)">
    {{ person.firstName }} {{ person.lastName }}
</div>

If your component utilizes the change detection strategy on push, it should not pose any performance issues.

Answer 3

Answer №2

Perhaps I may be mistaken, but isn't using a pipe the recommended approach for this situation? Alternatively, you could even chain two pipes!

<div *ngFor="let k of peoples| yearPipe: year | excusedPipe: no">

      {{k.people[j].firstName}} {{k.people[j].lastName}}

</div>

<h2>Excused</h2>

<div *ngFor="let k of peoples| yearPipe: year | excusedPipe: yes">

      {{k.people[j].firstName}} {{k.people[j].lastName}}

</div>

@Pipe({ name: 'yearPipe' })
export class YearPipe implements PipeTransform {
  transform(allPeople: People[], year: string) {
    return allPeople.filter(person => person.year == parseInt(year));
  }
}

@Pipe({ name: 'excusedPipe' })
export class ExcusedPipe implements PipeTransform {
  transform(allPeople: People[], excused: string) {
    if (excused === 'yes'){
       return allPeople.filter(person => person.excused);
    }else{
       return allPeople.filter(person => !person.excused);
    }
  }
}

The only tricky aspect is that the parameter for the pipe always needs to be a string, as per the documentation found on Angular.io.

Edit: Check out this stackblitz example (Chained Pipes example): https://stackblitz.com/edit/angular-rb5vmu

Answer 4

Perhaps I may be mistaken, but isn't using a pipe the recommended approach for this situation? Alternatively, you could even chain two pipes!

<div *ngFor="let k of peoples| yearPipe: year | excusedPipe: no">

      {{k.people[j].firstName}} {{k.people[j].lastName}}

</div>

<h2>Excused</h2>

<div *ngFor="let k of peoples| yearPipe: year | excusedPipe: yes">

      {{k.people[j].firstName}} {{k.people[j].lastName}}

</div>

@Pipe({ name: 'yearPipe' })
export class YearPipe implements PipeTransform {
  transform(allPeople: People[], year: string) {
    return allPeople.filter(person => person.year == parseInt(year));
  }
}

@Pipe({ name: 'excusedPipe' })
export class ExcusedPipe implements PipeTransform {
  transform(allPeople: People[], excused: string) {
    if (excused === 'yes'){
       return allPeople.filter(person => person.excused);
    }else{
       return allPeople.filter(person => !person.excused);
    }
  }
}

The only tricky aspect is that the parameter for the pipe always needs to be a string, as per the documentation found on Angular.io.

Edit: Check out this stackblitz example (Chained Pipes example): https://stackblitz.com/edit/angular-rb5vmu

Answer 5

Answer №3

When it comes to structuring your code, the choice is yours. However, if you want to avoid complications, you might consider implementing something along these lines:

html

<div *ngfor="let exused of isExcused(true)">
  {{excused.firstName}} {{excused.lastName}}
</div>

<div *ngfor="let exused of isExcused(false)">
  {{excused.firstName}} {{excused.lastName}}
</div>

ts

isExcused(excused) {
  let arr = [];
  for (let i = 0; i < this.peoples.length; i++) {
    if(peoples[i].year === this.year) {
      for (let j = 0; j < this.peoples[i]people.length; j++) {
        if (peoples[i].people[j].excused === excused) {
          arr.push(peoples[i].people[j]);
        }
      }
    }
  }
  return arr;
}

However, this solution may not be the most elegant. It would be better to structure your code like this:

html

<div *ngfor="let exused of excusedList">
  {{excused.firstName}} {{excused.lastName}}
</div>

<div *ngfor="let unexcused of unexcusedList">
  {{unexcused.firstName}} {{unexcused.lastName}}
</div>

ts

ngOnInit() {
  this.excusedList = isExcused(true);
  this.unexcusedList = isExcused(false);
}

Since it seems that your lists won't update dynamically. You could also consider using methods like .forEach() or .filter instead of traditional for loops to improve the readability of your code.

Answer 6

When it comes to structuring your code, the choice is yours. However, if you want to avoid complications, you might consider implementing something along these lines:

html

<div *ngfor="let exused of isExcused(true)">
  {{excused.firstName}} {{excused.lastName}}
</div>

<div *ngfor="let exused of isExcused(false)">
  {{excused.firstName}} {{excused.lastName}}
</div>

ts

isExcused(excused) {
  let arr = [];
  for (let i = 0; i < this.peoples.length; i++) {
    if(peoples[i].year === this.year) {
      for (let j = 0; j < this.peoples[i]people.length; j++) {
        if (peoples[i].people[j].excused === excused) {
          arr.push(peoples[i].people[j]);
        }
      }
    }
  }
  return arr;
}

However, this solution may not be the most elegant. It would be better to structure your code like this:

html

<div *ngfor="let exused of excusedList">
  {{excused.firstName}} {{excused.lastName}}
</div>

<div *ngfor="let unexcused of unexcusedList">
  {{unexcused.firstName}} {{unexcused.lastName}}
</div>

ts

ngOnInit() {
  this.excusedList = isExcused(true);
  this.unexcusedList = isExcused(false);
}

Since it seems that your lists won't update dynamically. You could also consider using methods like .forEach() or .filter instead of traditional for loops to improve the readability of your code.

Is it considered bad form to utilize nearly identical for loops in two separate instances within Angular 6?

Answer №1

Answer №2

Answer №3

Similar questions

The columns in the table are all displaying varying widths even though they have been defined with fixed table layout

Generate a dynamic key object in Angular/TypeScript

What is the best way to transform a JSON data-storing object into an array within Angular?

Tips for fixing a GET 404 (not found) error in a MEAN stack application

Encountering an issue with creating an App Runner on AWS CDK

Unleashing the potential of an endless animation by incorporating pauses between each iteration

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

The type 'Observable<any>' cannot be assigned to the type 'Observable<T>'

Executing a HTTP POST request using a dialog component

Building a Dynamic Checkbox Validation Feature in Angular Using Data retrieved from an API

Utilize multiple validators.patterns within a single value for enhanced data validation

Encountered an issue: The type 'Usersinterface' is not meeting the document constraints

Is the Inline Partial<T> object still throwing errors about a missing field?

Course completed following the module

Show a Toast in React without relying on useEffect to manage the state

I am sorry, but it seems like there is an issue with the definition of global in

Utilize @agm/core in Angular 6 to load Google Maps by first retrieving latitude and longitude data from the server

Typescript - Specifying the return type for a deeply nested object

Error: The identifier HTMLVideoElement has not been declared

Exploring Angular's Subcomponents