Ionic 3 + Firebase - Display all child nodes

Ionic Framework ionic-v3
1

Hi !

I’m starting to learn Ionic Framework with Firebase.
I have an a mobile app connected with Firebase.

Datas are organized like this : Capture

I’d like to display on my app a list of all “nomCat”

Here is my code and I don’t know how to get all the “nomCat” List :confused:

/*Provider*/
import { Injectable } from '@angular/core';
import firebase from "firebase";

@Injectable()
export class MycartProvider {
  cart=[];
  firedata2 = firebase.database().ref('/shops');

  constructor() {
    console.log('Hello MycartProvider Provider');
  }

getCatdetails() {
        var promise = new Promise((resolve, reject) => {
            this.firedata2.child('/uidAuchan/uidCatFruits/').once('value', (snapshot) => {
                resolve(snapshot.val());
            }).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';


@IonicPage()
@Component({
  selector: 'page-cart-list',
  templateUrl: 'cart-list.html',
})
export class CartListPage {


    displayCatName:string;


    constructor(public navCtrl: NavController, public navParams: NavParams, public cartProvider: MycartProvider,
              public zone: NgZone) {
    }
    loadCatdetails() {
        this.cartProvider.getCatdetails().then((res: any) => {
            this.displayCatName = res.nomCat;
        })
    }

ionViewWillEnter() {
        this.loadProddetails();
    }
}

With this code, I get CatName, but only for 1 Cat =>

Capture2

Thank you for reading, Can you help me please?

2

you can try child.val();

3

Thank you for your reply,

To be honest, I’m not sure to understand how to use and where I can try “child.val”. In my provider? Instead of “this.firedatas2.child” ?

4

Yes try into your provider

5

I followed this : https://firebase.google.com/docs/reference/js/firebase.database.DataSnapshot

But can’t get the list of CatName :confused:
Thanks for your help, I’ll search for another solution!

6

this is not working var age = snapshot.child("nomCat").val();?

7

Sorry ^^’

I tried this but still not working

var query = firebase.database().ref("users").orderByKey();
query.once("value")
  .then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      // key will be "ada" the first time and "alan" the second time
      var key = childSnapshot.key;
      // childData will be the actual contents of the child
      var childData = childSnapshot.val();
  });
});

So : In my provider ==>

    getAllCatdetails() {
        var query = firebase.database().ref("shops").orderByKey();
        query.once("value")
            .then(function(snapshot) {
                snapshot.forEach(function(childSnapshot) {
                    var key = childSnapshot.key;
                    var childData = childSnapshot.val();
                });
            });
    }
8

I close this topic, i found the solution to my problem !

// In my 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;
    }

//In my ts file

    ListCategory = [];
    temparrCat= [];

    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.temparrCat);
        })
}

Thanks !