Error: The Ionic and WordPress integration encountered an issue because the property 'length' is undefined

Question

Error: The Ionic and WordPress integration encountered an issue because the property 'length' is undefined

I am trying to establish a connection between Ionic and WordPress API with Angular. However, I am encountering the following 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)

What could be causing this issue?

wordpress angular typescript ionic-framework

Answer 1

Answer №1

There seems to be an issue with the code in wp.js using the provider wp-api-angular. The code and obj are not aligned:

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { WpApiPosts, WpApiMedia, WpApiUsers } from 'wp-api-angular';
import { Http, HttpModule } from '@angular/http';

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;
      }
    }
  }

}

Answer 2

There seems to be an issue with the code in wp.js using the provider wp-api-angular. The code and obj are not aligned:

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { WpApiPosts, WpApiMedia, WpApiUsers } from 'wp-api-angular';
import { Http, HttpModule } from '@angular/http';

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;
      }
    }
  }

}

Error: The Ionic and WordPress integration encountered an issue because the property 'length' is undefined

Answer №1

Similar questions

Encountered a PHP error in WordPress - Alert: Attempting to access an array offset on a value of type boolean within the plugins/Ultimate_VC_Addons/.. file at

Aurelia TypeScript app experiencing compatibility issues with Safari version 7.1, runs smoothly on versions 8 onwards

Another term for the *ngIf directive is as follows:

Troubleshooting problem with sorting in Angular 4 material header

The Angular application has encountered a stack overflow due to exceeding the maximum

Having difficulty showing the ionic back button within my side menu

Typescript: Verifying the type of an interface

The type 'Data' is lacking the following attributes from its definition

Different property 'responseType' types are not compatible

Angular: Modify parent component's field using route

There was a problem with the module '@angular/material' as it was unable to export a certain member

Enhancing React with TypeScript and Redux

Effectively enhance constructor by incorporating decorators

Establish the timeframe for when the dialog box is displayed or closed in Angular version 13

Utilizing Angular 2 for Displaying SVG Information

When attempting to redirect to the home page in Angular 6, the page successfully redirects but fails to load properly

Switch up text colors on the fly in Angular as you type!

When utilizing Ionic with Angular, it is difficult to access the hardware back button on mobile devices that have buttons located within the display/screen

Adding relationships between models in an Angular/Drupal project using angular2-jsonapi

Combining data from various API calls into one cohesive array using RXJS