Angular5 Cannot read property 'length' of undefined

0
votes

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..!

4
javascriptangulartypescriptangular5
You can use the elvis operator to check for undefined, place ? after any field, doing so would not throw an error like the one you are facing, for e.g do this. <div *ngIf="(studentListData | filter)?.length == 0"> – Sadiq Ali
didn't solve?I used the same but. – Brijesh Mavani
trying creating a plunkr so that we can debug the issue for you. Maybe try a hard refresh first. – Sadiq Ali
What does your service return? An Observable? – alsami
@SamiAl90 I just save my data in local storage and in service i get like this if (localStorage.getItem('students') && localStorage.getItem('students') != '') { studentList = { code: 200, message: "Students List Fetched Successfully", data: JSON.stringify(localStorage.getItem('students')) } – Brijesh Mavani

4 Answers

2
votes

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>
0
votes

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;
    });
}
0
votes

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.

0
votes

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 :)