Hi there!
I’d like to have some advices for my Ionic/Firebase application.
I use Ionic 3
I’m connected to Firebase
My firebase datas are organized like this.
I’d like to display green datas and red datas like this.
but I don’t succeed …
Finally, here is my code and the result (with no css)
import { Injectable } from '@angular/core';
import firebase from "firebase";
/*
Generated class for the MycartProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class MycartProvider {
cart=[];
firedata2 = firebase.database().ref('/shops/uidAuchan/categoryList');
firedata3 = firebase.database().ref('/shops/uidAuchan/categoryList/uidCatFruits');
constructor() {
console.log('Hello MycartProvider Provider');
}
getAllCatList() {
var promise = new Promise((resolve, reject) => {
this.firedata2.orderByChild('uid').once('value', (snapshot) => {
let Catdata = snapshot.val();
let temparr = [];
for (var key in Catdata) {
temparr.push(Catdata[key]);
}
resolve(temparr);
}).catch((err) => {
reject(err);
})
})
return promise;
}
getAllCatListProducts() {
var promise = new Promise((resolve, reject) => {
this.firedata3.orderByChild('uid').once('value', (snapshot) => {
let Productsdata = snapshot.val();
let temparr = [];
for (var keyProd in Productsdata) {
temparr.push(Productsdata[keyProd]);
}
resolve(temparr);
}).catch((err) => {
reject(err);
})
})
return promise;
}
}
import {Component, NgZone} from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { MycartProvider } from '../../providers/mycart/mycart';
import firebase from "firebase";
/**
* Generated class for the CartListPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-cart-list',
templateUrl: 'cart-list.html',
})
export class CartListPage {
ListCategory = [];
ProductCategory = [];
temparrCat = [];
temparrProd = [];
constructor(public navCtrl: NavController, public navParams: NavParams, public cartProvider: MycartProvider,
public zone: NgZone) {
this.cartProvider.getAllCatList().then((res: any) => {
this.ListCategory = res;
this.temparrCat = res;
console.log(this.ListCategory[0].uid);
})
this.cartProvider.getAllCatListProducts().then((res2: any) => {
this.ProductCategory = res2;
this.temparrProd = res2;
console.log(this.temparrProd);
})
}
shopfail()
{
this.navCtrl.setRoot('ShopMapPage');
this.cartProvider.cart = [];
}
}
<!--
Generated template for the CartListPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="hcolor">
<ion-title>Ma Liste de Courses</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button round outline (click)="shopfail()">Je me suis trompé de magasin</button>
<ion-list no-lines>
<ion-list>
<ion-item-sliding *ngFor="let key of ListCategory">
<ion-item >
<h2>{{key.nomCat}}</h2>
</ion-item>
</ion-item-sliding>
</ion-list>
</ion-list>
<ion-list no-lines>
<ion-list>
<ion-item-sliding *ngFor="let keyProd of ProductCategory">
<ion-item >
<h2>{{keyProd.nom}}</h2>
</ion-item>
</ion-item-sliding>
</ion-list>
</ion-list>
coucou
</ion-content>
As you can see, the path is already put in “firedata3” so i can only access to “Fraises” & “Pommes”
If you could help me it will be a miracle …
Thank you for reading this message.
