CODEWITHSUNDEEP
javascriptangulartypescriptangular5
B Kansara
B Kansara

Reputation: 1158

Angular5 Cannot read property 'length' of undefined

Hello I want to display a list of users data but I have put a condition on that if user data is greater than 0 then display otherwise not with help of length property in *ngIf, so my issue when I use this it gets error like Cannot read property 'length' of undefined,So please anyone help me.
I also show same question on angular2 version but didn't help much.Here is my view.

<div *ngIf="(studentListData | filter).length == 0">
   <h3>Sorry ..!data not found</h3>
</div>

<div *ngIf="(studentListData | filter | filter ).length > 0>
   <tr *ngFor="let student of studentListData | filtter; index as i;">
        // ** here is my td *//
   </tr>
</div>

In my component

export class studentAllComponet implements OnInit {
  studentListData:any;

getStudentList(){
        let studentList = this.studentService.getAllStudents();
        this.success(studentList)
    }

success(data){
        this.studentListData = data;
        for (var i = 0; i < this.studentListData.length; i++) {
            this.studentListData[i].name = this.studentListData[i].first_name +' '+ this.studentListData[i].last_name;
        }
    }

}

In my filter 

@Pipe({  name: 'filtter' })
export class FiltterPipe implements PipeTransform{
   transform(value: any, args?: any): any {
        if (args != undefined && args != null && args != '') {
            return value.filter(data => (data.name.toLowerCase()).indexOf(args.toLowerCase()) > -1);
        }
        return value;
    }
}

Thanks in advance..!

Upvotes: 1

Views: 4877

Answers (4)

Manoj Singh
Manoj Singh

Reputation: 2911

A very simple solution:

In your component file, you can initialize the studentListData with an empty array like this

export class studentAllComponet implements OnInit {
    studentListData:any = [];

Now, this will take care of undefined issue since you always have an array, its just that it is empty at the beginning.

Hope this helps. Happy Coding :)

Upvotes: 0

Rak2018
Rak2018

Reputation: 965

I think , you can handle this in the TypeSript only. No need to change in HTML code.

In your component you can check, whether the studentList is generated empty or not. 

export class studentAllComponet implements OnInit {
studentListData:any;

getStudentList(){
let studentList = this.studentService.getAllStudents();
**if(studentList === undefined){
  alert('Student List is empty');
  return[];
}**
else{
    this.success(studentList)
    }
}

success(data){
    this.studentListData = data;
    for (var i = 0; i < this.studentListData.length; i++) {
        this.studentListData[i].name = this.studentListData[i].first_name +' '+ this.studentListData[i].last_name;
    }
}

}

And now you no need to use any filter in HTML.

Upvotes: 0

standby954
standby954

Reputation: 209

If your studentService returns an observable, I would use subscribe to get the result from it and manipulate the result in the subscribe method:

getStudentList(){
  this.studentService
    .getAllStudents()
    .subscribe((data: any) => {
      data.forEach((d) => {
        d.name = d.first_name + ' ' + d.last_name
      })
      this.studentListData = data;
    });
}

Upvotes: 0

alsami
alsami

Reputation: 9815

In your template you can use the safe navigation operator '?' before a property access so angular will check for you if it has an object. I guess studentListData is null or not defined by the time your template is rendered.

<div *ngIf="(studentListData | filter)?.length == 0">
   <h3>Sorry ..!data not found</h3>
</div>

<div *ngIf="(studentListData | filter | filter )?.length > 0">
   <tr *ngFor="let student of studentListData | filtter; index as i;">
        // ** here is my td *//
   </tr>
</div>

Upvotes: 3

Related Questions