ERROR TypeError: Cannot read property 'path' of undefined no matter what i tried

Question

I keep getting the undefined error no matter what I tried. I do have value when I console.log(this.EmployeeDetails.gallery);, gallery[i].path does have a value, but my browser console keep prompting it, I tried different methods like setting an empty string first, moving the for-loop in another function and set it await, everything doesn't work.

await this.employeeService.getEmployeeDetails(this.Employeeuuid).subscribe((res) => {
  this.EmployeeDetails = res as Employee[];
  this.data.serviceprice = this.EmployeeDetails.serviceprice;
  this.setEmployees();
  console.log(this.EmployeeDetails.gallery);

  for (let i = 0; i <= this.EmployeeDetails.gallery.length; i++) {
    this.photossrc = this.EmployeeDetails.gallery[i].path;
    const src = this.photossrc;
    const caption = 'Image ' + i + ' caption here';
    const thumb = this.EmployeeDetails.gallery[i].path;
    const album = {
      src: src,
      caption: caption,
      thumb: thumb
    };
    this.albums.push(album);
  }
});

ERROR TypeError: Cannot read property 'path' of undefined at EmployeeEditComponent.push../src/app/pages/employee/employee-edit/employee-edit.component.ts.EmployeeEditComponent.loadPhotosAndVideos (employee-edit.component.ts:201) at SafeSubscriber._next (employee-edit.component.ts:96) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)

The problem is inside this.EmployeeDetails.gallery[i]. Firstly, check the this.EmployeeDetails.gallery. Maybe it is not array at all or empty array — Volodymyr Khmil
Are you sure ` this.EmployeeDetails = res as Employee[];` is correct? You are setting the EmployeeDetails to an array of Employees, not as a single Employee. So you are asking the path of the gallery of an array of employees, not the path of the gallery of an employee. — Korfoo
You are starting a for loop with index 0 to the length of your list and equal? The time it reaches the length of your array it will target an unidentified object of your Array. It should be for (let i = 0; i < this.EmployeeDetails.gallery.length; i++) your last element index is this.EmployeeDetails.gallery.length - 1 — Tiago Silva

GaryB GaryB · Accepted Answer · 2019-02-25T11:32:19

The loop should not be smaller than or equal to the length just smaller, like this:

 for (let i = 0; i < this.EmployeeDetails.gallery.length; i++) {
     ...
    }

ERROR TypeError: Cannot read property 'path' of undefined no matter what i tried

1 Answers