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;
– NilsonUehara
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.
– Carlos Pinheiro
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;
– André Vicente