Json object in Ionic 2

Asked

Viewed 769 times

1

I’m starting with Ionic 2 and Node.js and I’m trying to consume the API I created, but I’m having trouble locating the problem when I try to generate a ngFor listing from a JSON, so I’ve read ngFor needs a JSON Object to work, so I created the previous to get this object.

@Injectable()
export class ProdutoService {

  rest: any;

  constructor(public http: Http) {
    console.log('Hello ProdutoService Provider');
  }

  load() {
    if (this.rest) {
      return Promise.resolve(this.rest);
    }
    // Dont have the data yet
    return new Promise(resolve => {
      this.http.get('http://localhost:3000/produtos/')
        .map(res => res.json())
        .subscribe(data => {
          this.rest = data.results;
          resolve(this.rest);
        });
    });
  }
}

product ts.

@IonicPage()
@Component({
  selector: 'page-produtos',
  templateUrl: 'produtos.html',
  providers: [ProdutoService]
})

export class ProdutosPage {

  public produtos: any;

  constructor(public navCtrl: NavController, public produtoService: ProdutoService){
    this.loadProduto();
  }

  loadProduto(){
    this.produtoService.load()
    .then(rest => {
      this.produtos = rest;
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProdutosPage');
  }
}

and my page:

 produto.html  
<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of produtos">
      <ion-avatar item-left>
        <img src="{{item.foto}}">
      </ion-avatar>
      <h2>{{item.produto}} {{item.categoria}}</h2>
      <p>{{item.gender}}</p>
    </ion-item>
  </ion-list>
</ion-content>

and it works perfectly if you use the randomuser.me/api, but when using my API does not give any error, just does not load anything, see the two JSON, for me "layman" are equal, but;

Randon:

{"results":[{"gender":"male","name":{"title":"mr","first":"hunter","last":"smith"},"location":{"street":"6823 peel st","city":"stirling","state":"northwest ....

mine:

[{"id":100,"produto":"Arroz Parbolizado Tio Joao 5kg Tp1","descricao":"","categoria":18,"foto":"r6ccgtwize8o8g44gg.jpg","ean":"","status":"Ativo"}]

I’ve already made the comeback with {"resuls":{"id":100,"produto":"Arroz Parbolizado Tio Joao 5kg ... and nothing.

I take advantage and put part of the API that returns the JSON;
model:

var db=require('../dbconnection'); //reference of dbconnection.js

var Produtos={

    getAllProdutos:function(callback){

        return db.query("Select * from produtos",callback);

    },
};

module.exports=Produtos;

route:

Produtos.getAllProdutos(function(err,rows){
if(err)
  {
    res.json(err);
  }
  else
  {
    res.json(rows);
  }
});

I’ve tried so many ways and I haven’t found a way to make it work.

  • Your service is returning the RESULTS object (this.Rest = data.Results;), but your object does not have it. (note also that in your attempt to change the return, you misspelled -> {"resuls":{... Try to change your service to return this.rest = data;

  • thanks, in the various return attempts I ended up not seeing. it would be better to change the api, have some indication of tutorial ? because all mysql I saw are very basic.

  • In this line this.Rest = data.Results; vc is taking the Results key, so your json return has to have {"Results":[{"something"}, {"something else"}], if you want to take just [{"something"}, {"something else"}] changes the line to this.Rest = date;

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.