Ionic2 promise issue

Ionic Framework ionic-v3
1

Hi all,

I’m a newbie and try to turn it for hours so I hope someone can show me my errors, maybe ^^

So, I have a provider that calls a json

`import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';
/*
  Generated class for the Products provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Products {
  constructor(http: Http) {
    this.http = http;
    this.products = null;
  }

  load() {
    if (this.products) {
      // already loaded data
      return Promise.resolve(this.products);
    }
    // don't have the data yet
    return new Promise(resolve => {

        this.http.get('./data.json').map(res => res.json())
            .subscribe(data => {
                this.products = data;
                console.debug(this.products);
            },
            err =>{

                console.log("Erreur !!!!" + err.message);
            });
    });
  }
}

`
The page1, Instanciate Products and call the Load function

`import {Page} from 'ionic-framework/ionic';
import {Products} from '../../providers/products/products.js'


@Page({
  templateUrl: 'build/pages/page1/page1.html',
    providers: [Products]
})
export class Page1 {
    constructor(products: Products) {

       this.products = products.load();

    }
}

`

And finally the template that make errors : EXCEPTION: Cannot find a differ supporting object ‘[object Object]’ in [products in Page1@7:22]

`<ion-navbar *navbar>
  <ion-title>Title</ion-title>
</ion-navbar>
<ion-content padding class="page1">


    <ion-list>
            <ion-item *ngFor="#product of products">
                <ion-avatar item-left>
                    <img [src]="{{product.img}}" />
                </ion-avatar>
                <h2>{{product.title}}</h2>

                <p>{{product.desc}}</p>
            </ion-item>
    </ion-list>
</ion-content>

`

2

Where did you put your data.json file. It should be in WWW/build/page/ not in app/page/. Whenever app run it pulls everything form www folder. Same thing happened to me. After I put json file inside www/build/page. It worked. Hope it works

3

Hi thank you for answer :wink:

my data.json was in the www root, so I put it in page folder too, in the page1 folder; everywhere in www product folder but anyway the same errror :s

It works when I put the code in the page1.js. But I want it for all project so I decided to make it Provider…since that cannot loas this f*** json.

There is no such Docs for Ionic 2 about Providers , I waste my time just trying to test a json import I think go back to Ionic 1 or other solutions…

EDIT

I’ve found my error

@Page({
  templateUrl: 'build/pages/page1/page1.html',
    providers: [Products]
})
export class Page1 {
    constructor(products: Products) {

       this.products = products.load();

    }
}

should be

@Page({
  templateUrl: 'build/pages/page1/page1.html',
    providers: [Products]
})
export class Page1 {
    constructor(products: Products) {

       this.products = products;

// and then loading the data …

    }
}

The json is loading but I have nothing in the view now… to be continued … ^^

EDIT

I become crazy about rendering those datas… it’s not working

4

Try this;
go to myjson.com. Copy your data.json file and the website will give you temp json url and put it in your http.get() method and hope for the best.

5

try

    this.products = products.load().then( (result) => {
        this.products = result;
    });
6

Thanks for your help

@passa : with local and remote json I got my object json in Page1.js I console.debug it and all there

@fuffenz same result with your code but I keep it ;).

the error is displayed only when I put ngFor in the Page1.html

<ion-item *ngFor="#product of products">

</ion-item>

EXCEPTION: Cannot find a differ supporting object '[object Object]' in [products in Page1@7:24]

The console.debug called in Page.js with the object json is display after the error message in the browser debug console.

That look like that the html call the object before it’s load in the .js

7

Are you have resolve on the http call process ??