Tips on Showing a Unique List in Mat-Table?

Question

Tips on Showing a Unique List in Mat-Table?

Here's what I'm trying to accomplish: I have a list and I want to display it without any duplicates. I attempted using the code (this.model.map(x => x.map), but it resulted in an error. Can anyone help me fix this?

model: myModel[];
myObj:any;
result:[];

constructor(){
this.result = Array.from(new Set(this.model.map(x => x.Name))); <----- I encountered an error with this line 
`Cannot read properties of undefined (reading 'map')`
}

ngOninit(){
this.getList()

getList() {
    this.services.getListAll(5, 1).subscribe((data: myModel[]) => {
      this.myObj= data;
      this.model= this.myObj.items
    }) 
  }
  onPaginateChange(event: PageEvent ){
    let index = event.pageIndex;
    let size = event.pageSize;
    index = index + 1;

    this.services.getListAll(size, index).pipe(first()).subscribe((data: myModel[]) => {
      this.myObj= data;
      this.model= this.myObj.items
     
    });
  }
}

I've tried various approaches, but keep encountering the same error. Any assistance would be greatly appreciated.

angular typescript rxjs

Answer 1

Answer №1

When you're inside the constructor and attempt to access this.model, keep in mind that this.model doesn't have a value at that time. It only gets assigned a value asynchronously through the callback function of getList inside ngOnInit. To ensure that this.model has a valid value, it is recommended to move your filter logic inside the callback function.

getList() {
    this.services.getListAll(5, 1).subscribe((data: myModel[]) => {
      this.myObj= data;
      this.model= this.myObj.items
      this.result = Array.from(new Set(this.model.map(x => x.Name)));
    }) 
  }

Answer 2

When you're inside the constructor and attempt to access this.model, keep in mind that this.model doesn't have a value at that time. It only gets assigned a value asynchronously through the callback function of getList inside ngOnInit. To ensure that this.model has a valid value, it is recommended to move your filter logic inside the callback function.

getList() {
    this.services.getListAll(5, 1).subscribe((data: myModel[]) => {
      this.myObj= data;
      this.model= this.myObj.items
      this.result = Array.from(new Set(this.model.map(x => x.Name)));
    }) 
  }

Answer 3

Answer №2

I am currently working on understanding your issue and trying to find a solution.

It seems like you are removing duplicates from an array before assigning the values to a variable. You should move that line of code after retrieving data from the API. Take a look at the improved version of your code below, where I have optimized it for better performance:

public model: myModel[];
public myObj: any = null;
public result: [] = [];

ngOninit(){
  this.getList(5, 1); // Optional to pass parameter
}

public getList(pageSize: number = 5, pageNumber: number = 1) {
    this.services.getListAll(pageSize, pageNumber).subscribe((data: myModel[]) => {
      this.myObj= data;
      this.model= this.myObj?.items || [];
      this.result = [];
      if (this.model != null && this.model.length > 0) {
        this.result = Array.from(new Set(this.model.map(x => x.Name)));
      }
    }) 
  }
}

public onPaginateChange(event: PageEvent ){
   let index = event.pageIndex;
   let size = event.pageSize;

   this.getList(size, index + 1);
}

Please try the updated code above, as it may resolve your issue.

Thank you!

Answer 4

I am currently working on understanding your issue and trying to find a solution.

It seems like you are removing duplicates from an array before assigning the values to a variable. You should move that line of code after retrieving data from the API. Take a look at the improved version of your code below, where I have optimized it for better performance:

public model: myModel[];
public myObj: any = null;
public result: [] = [];

ngOninit(){
  this.getList(5, 1); // Optional to pass parameter
}

public getList(pageSize: number = 5, pageNumber: number = 1) {
    this.services.getListAll(pageSize, pageNumber).subscribe((data: myModel[]) => {
      this.myObj= data;
      this.model= this.myObj?.items || [];
      this.result = [];
      if (this.model != null && this.model.length > 0) {
        this.result = Array.from(new Set(this.model.map(x => x.Name)));
      }
    }) 
  }
}

public onPaginateChange(event: PageEvent ){
   let index = event.pageIndex;
   let size = event.pageSize;

   this.getList(size, index + 1);
}

Please try the updated code above, as it may resolve your issue.

Thank you!

Tips on Showing a Unique List in Mat-Table?

Answer №1

Answer №2

Similar questions

Encountered an Angular 4 issue - ERROR in main.ts file: Module not located - Error: Unable to resolve './$$_gendir/app/app.module.ngfactory'

What is the most effective method for obtaining the ViewContainerRef of a mat-row in Angular 4

What is the C sharp version of this code structure?

Exploring the dynamic duo of SystemJS and AngularJS 2

Conditioning types for uninitialized objects

strophe js is designed to handle the reception of individual messages specifically within the context of Angular

The challenge of validating in Typescript and utilizing type inference

Displaying Angular reactive form data on screen and then populating it in a jQuery table

Swap out each addition symbol with a blank space within a given text

Bring in a function by its name from the ts-nameof package that is not declared in the d.ts export

AG-Grid: Enhancing Cell Interactivity

I am experiencing an issue with the PUT method on my API as it is not correctly setting the req.body data

The exclusion feature in TSLint does not seem to be functioning properly

Angular Material transition animation in fading style

Derive a subset Union from a Union in Typescript

Utilizing arrays to generate dynamic types within a class method

Issue with Angular 2 - Basic form validation no longer functioning

Develop your own personalized Angular schematics that produces a file that begins with an underscore

encountering difficulties with implementing the custom pagination feature in Angular 2

How to Route in Angular 5 and Pass a String as a Parameter in the URL