FirebaseList - Unable to access parse data fetched from firebase

firebase get data by key android
retrieve data from firebase android
get data from firebase python
firebase get all child keys android
firebase get value of child
firebase get list of data android
firebase get child value javascript
retrieve multiple data from firebase android

I'm getting " Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' " when running the following code.

html template:

 <ion-list>
    <ion-item-sliding *ngFor="let item of shoppingItems | async">
      <ion-item>
        {{ item.$value }}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="danger" icon-only (click)="removeItem(item.$key)"><ion-icon name="trash"></ion-icon></button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

page ts:

shoppingItems: AngularFireList<any>;
constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {
    this.shoppingItems = this.firebaseProvider.getShoppingItems();
}

firebase provider

  constructor(public afd: AngularFireDatabase) {
    console.log('Hello FirebaseProvider Provider');
    console.log("Shopping items"+afd.list('/shoppingItems/'))
  }

  getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/');
  }
  addItem(name) {
    this.afd.list('/shoppingItems/').push(name);
  }

firebase db

shoppingItems
 -KxmiUt64GJsPT84LQsI: "qwerty"
 -KxmifqyfD41tRPwFh07: "key"

From the web app I was able to add items to firebase db. But I wasn't able to render the data from firebase. I am getting the above mentioned error.

Thanks in advance for your help.

AngularFire2 V5

this.afd.list('/shoppingItems/') does not return an asynchronous observable which is supposed to work with async pipe. It returns a reference to the List in the real-time database. You need to use valueChanges() to return that.

In your provider return the observable,

 getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/').valueChanges();//here
  }

If you are accessing through $key/$value, Check the upgrade details for angularfire2 v4 to 5. This is because FirebaseList is deprecated and AngularFireList is now returned from version 5.

Calling .valueChanges() returns an Observable without any metadata. If you are already persisting the key as a property then you are fine. However, if you are relying on $key, then you need to use .snapshotChanges()

You need to use snapshotChanges()

 getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/').snapshotChanges();//here
  }

To access $key or $value in html, use item.payload.key and item.payload.val()

FirebaseList, AngularFire2 V5. this.afd.list('/shoppingItems/') does not return an asynchronous observable which is supposed to work with async pipe. It returns a reference to  Note: By default, read and write access to your database is restricted so only authenticated users can read or write data. To get started without setting up Authentication, you can configure your rules for public access. This does make your database open to anyone, even people not using your app,

Add ionViewDidLoad life cycle in the home.ts file and instead of constructor load your item in ionViewDidLoad , replace your constructor with below code

    constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {

  }

  ionViewDidLoad() {
    this.shoppingItems = this.firebaseProvider.getShoppingItems();
    console.log(this.shoppingItems);
  }

Retrieving Data - Firebase, Get a DatabaseReference. To read data from the database, you need an instance of DatabaseReference : using Firebase  There are two ways to retrieve data stored in Cloud Firestore. Either of these methods can be used with documents, collections of documents, or the results of queries: Call a method to get the data. Set a listener to receive data-change events. When you set a listener, Cloud Firestore sends your listener an initial snapshot of the data, and

Import at page.ts

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { AngularFireDatabase} from 'angularfire2/database';
 import { Observable } from "rxjs/Observable";
 import { ShoppingItem } from '../../model/shoppingitem';

import your provider the right way from your provider

 import { FirebaseProvider } from '../../providers/firebase/firebase';

 export class Page {

  shoppingItems:Observable<ShoppingItem[]>;

 constructor(public navCtrl: NavController, 
             public firebaseProvider: FirebaseProvider) {

                this.shoppingItems=this.firebaseProvider
                .getShoppingItem()
                .snapshotChanges()
                .map(
                  changes=>{
                    return changes.map(c=>({
                      key:c.payload.key, ...c.payload.val(),
                    }));
                  }
                );
          }
        }

     }

firebaseProvider

note the 'shopping-list' is the table at the firebase database

  private itemListRef = this.afDatabase.list<ShoppingItem>('shopping-list');

  constructor(private afDatabase: AngularFireDatabase) {}

 .getShoppingItem(){

   return this.itemListRef;

  }
 }

Your shoppingitem model

 export interface ShoppingItem{
  key?:string;
  }

Creating a custom Listview using the Firebase Realtime Database in , Contents; Reading Data with GET; Adding URI Parameters shallow cannot be used with any of the "filtering data" query parameters. a small data transfer and don't want to wait too long to fetch a potentially huge subtree. Children with a key that can be parsed as a 32-bit integer come first, sorted in ascending order. Blocking reads: Data stored in a Firebase Realtime Database is retrieved by invoking a blocking method on a database reference, which returns the data stored at the reference. Each method call is a onetime operation. That means the SDK does not register any callbacks that listen to subsequent data updates.

Firebase get all child keys, 4.2: Second, once we make the call to firebase we will receive a JSON object which needs to be parsed to get the relevant data. Hence,  T - The class type to use as a model for the data contained in the children of the given Firebase location public abstract class FirebaseListAdapter<T> extends BaseAdapter This class is a generic way of backing an Android ListView with a Firebase location.

A Firebase Realtime Database List Data Tutorial, Anger is a typical reaction of all people when they fail to achieve a goal. When you fetch the data from Firebase, you will get all of the child nodes. and grants access to your projects firebase list lists of all of your Firebase projects get the direct url to access it hence no need to parse full data based on your need just  The Firebase Admin SDK provides an API for managing your Firebase Authentication users with elevated privileges. The admin user management API gives you the ability to programmatically complete the following tasks from a secure server environment: Create new users without any throttling or rate limiting.

Building A ToDo App in React with Firebase and Redux, The preceding chapters have introduced the Firebase realtime database and explored the concepts creating an example app that makes use of many of the list data features of the realtime database. Configuring the Project for Realtime Database Access package com.ebookfrenzy.firebaselist; . . import android.​widget. In this chapter, we will show you how to read Firebase data. The following image shows the data we want to read. We can use the on() method to retrieve data. This method is taking the event type as "value" and then retrieves the snapshot of the data.

Comments
  • this looks a lot like stackoverflow.com/questions/47045479/…..
  • @SurajRao yes, I am also following the same tutorial.
  • this return value should be assigned to a variable of type Angularfirelist[] right?, how to do that in page ts?
  • from your example, you are already using async so you want to assign observable of list(which you are already doing). If you want data, you will have to subscribe in component
  • Thanks for your help mate!
  • I am still unable to get the value's using item.$value in template. any idea on how to debug / solve it?
  • That is from version 5 of angularfire2 @ImdadAli you must be using 4.x