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 listing with ngFor from a JSON, so I've read the ngFor needs to a JSON object to work, so I created the provider to get that 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);
});
});
}
}
producto.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>
randon:
{"results":[{"gender":"male","name":{"title":"mr","first":"hunter","last":"smith"},"location":{"street":"6823 peel st","city":"stirling","state":"northwest ....
My:
[{"id":100,"produto":"Arroz Parbolizado Tio Joao 5kg Tp1","descricao":"","categoria":18,"foto":"r6ccgtwize8o8g44gg.jpg","ean":"","status":"Ativo"}]
I already did the return with randomuser.me/api
... and nothing.
I take and place 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 have tried several ways and found no way that would work.