Firebase + Ionic 3 - Need Advices/Help to retrieve datas

@Aurevoiiiir wrote:

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.

firebase.png368x670 19.9 KB

I’d like to display green datas and red datas like this.

result.png496x552 2.62 KB

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.

Posts: 1

Participants: 1

Read full topic