wp-api-angular icon indicating copy to clipboard operation
wp-api-angular copied to clipboard

TypeError: Cannot read property 'length' of undefined

Open davidperezgar opened this issue 8 years ago • 5 comments

Why do I get this error?

TypeError: Cannot read property 'length' of undefined at WpProvider.webpackJsonp.211.WpProvider.getUserImage (http://localhost:8100/build/main.js:293:51) at BlogPage.webpackJsonp.150.BlogPage.getUserImage (http://localhost:8100/build/main.js:36:32) at Object.eval [as updateRenderer] (ng:///AppModule/BlogPage.ngfactory.js:47:25) at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:15041:21) at checkAndUpdateView (http://localhost:8100/build/vendor.js:14177:14) at callViewAction (http://localhost:8100/build/vendor.js:14522:21) at execEmbeddedViewsAction (http://localhost:8100/build/vendor.js:14480:17) at checkAndUpdateView (http://localhost:8100/build/vendor.js:14173:5) at callViewAction (http://localhost:8100/build/vendor.js:14522:21) at execComponentViewsAction (http://localhost:8100/build/vendor.js:14454:13)

davidperezgar avatar Nov 26 '17 19:11 davidperezgar

Hello, I see in my dependencies this error: UNMET PEER DEPENDENCY @angular/[email protected] How can i solve it?

davidperezgar avatar Nov 29 '17 09:11 davidperezgar

Hello,

what version of angular do you use? can you share the code you use when getting this error?

shprink avatar Nov 30 '17 06:11 shprink

It was 5.0.0. But I've changed to 4.4.6, but the error still remains...

davidperezgar avatar Dec 02 '17 08:12 davidperezgar

can you share the code you use when getting this error?

shprink avatar Dec 04 '17 10:12 shprink

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { WpApiPosts, WpApiMedia, WpApiUsers } from 'wp-api-angular';
 
export class Post {
  public media_url: Observable<string>;
  constructor(public authorId: number, public id: number, public title: string, public content: string, public excerpt: string, public date: string, public mediaId?: number) { }
}
 
export class User {
  constructor(public id: number, public name: string, public userImageUrl: string) { }
}

@Injectable()
export class WpProvider {

  users: User[];
  
   constructor(public wpApiPosts: WpApiPosts, public wpApiMedia: WpApiMedia, public wpApiUsers: WpApiUsers) {
     this.wpApiUsers.getList()
       .map(res => res.json())
       .subscribe(data => {
         this.users = [];
         for (let user of data) {
           let oneUser = new User(user[ 'id' ], user[ 'name' ], user[ 'avatar_urls' ][ '96' ]);
           this.users.push(oneUser);
         }
       })
   }

   getPosts(): Observable<Post[]> {
    return this.wpApiPosts.getList()
      .map(res => res.json())
      .map(data => {
        var posts = [];
        for (let post of data) {
          let onePost = new Post(post[ 'author' ], post[ 'id' ], post[ 'title' ][ 'rendered' ], post[ 'content' ][ 'rendered' ], post[ 'excerpt' ][ 'rendered' ], post[ 'date' ], post[ 'featured_media' ]);
          onePost.media_url = this.getMedia(onePost.mediaId);
          posts.push(onePost);
        }
        return posts;
      });
  }
 
  getMedia(id: number): Observable<string> {
    return this.wpApiMedia.get(id)
      .map(res => res.json())
      .map(data => {
        return data[ 'source_url' ];
      });
  }
 
  getUserImage(userId: number) {
    for (let usr of this.users) {
      if (usr.id === userId) {
        return usr.userImageUrl;
      }
    }
  }
 
  getUserName(userId: number) {
    for (let usr of this.users) {
      if (usr.id === userId) {
        return usr.name;
      }
    }
  }

}

davidperezgar avatar Dec 04 '17 15:12 davidperezgar