1

I am starting with Ionic and Angular and I am facing an issue with variable type. I am querying an API that ouput an array of elements.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import  {PostService } from '../_providers/post-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers:[PostService]
})
export class HomePage {
  public posts: any;
  private start:number=0;

  constructor(public navCtrl: NavController, public postService: PostService) {
    this.getPost();
  }
  getPost(){
    return new Promise(
      resolve => {
        this.postService.load(this.start)
        .then(data => {
          console.log(data);
          for(let post of data) {
            this.posts.push(post);
          }
          resolve(true);
        });
      });
}

  doInfinite(infiniteScroll:any) {
   console.log(this.start);
   this.start+=10;
   this.getPost().then(()=>{
       infiniteScroll.complete();
     });
 }

  likePost(post){
    post.likes++;
  }

}

Line 23, I have this issue: issue

And the console.log returns: console.log

Finally, the PostService class looks like this:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class PostService {

  perpage:number = 10;

  constructor(public http: Http) {}

  load(start:number=0) {

    return new Promise(resolve => {

      this.http.get('http://api.voyonsvoir.fr/?[limit]='+this.perpage+'&filter[skip]='+start)
        .map(res => res.json())
        .subscribe(data => {
          resolve(data.posts);

        });
    });
  }
}

Thanks for your help.

4
  • Initialise your posts array to be empty to begin with. Try something other than for..of, try for..in or the javascript forEach see if those work. Commented Mar 28, 2017 at 12:41
  • Thanks rrd. Would this be the right way to declare an empty array public posts: string[]; > Also when I try to use forEach I have this error: Property 'forEach' does not exist on type {} Commented Mar 28, 2017 at 13:29
  • Actually the for..in did work. But for(let post in data) returns me only the array key and no the content Commented Mar 28, 2017 at 13:47
  • I did something ugly from my point of view : getPost(){ return new Promise( resolve => { this.postService.load(this.start) .then(data => { for(let post in data) { this.posts.push(data[post]); } resolve(true); }); }); } Commented Mar 28, 2017 at 15:12

1 Answer 1

1

You need to add some types, both here:

public posts: any[] = [];

And then the return from the service method:

load(start:number=0): Promise<any[]> {
    return new Promise<any[]>(resolve => {

Note: it would be better to be more specific than any, but it should get it at least running.

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks Simon, I've added the public post line. Not sure what to do with the greet() fonction. Are you refering to PostService class file or my HomePage class file ?
Sorry, I must have had a copy/paste artefact: load(): Promise<any[]> { return new Promise<any[]>(resolve => { However,
The core problem is TypeScript doesn't know that the promise in your function resolves to an array, so it has no idea that data is an array. If you annotate up the load function, it should be fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.