My app only shows one item of retrieved data

Question

I'm building a little app using firebase and Angular 2.

Things are going well but now I'm facing a little issue. When I retrieve data, in the console I have all my data (3 objects). But the app only shows one of them (the last in the database).

I already looked at this stackoverflow question .

But its seems to be not the same problem

I'm retrieving data this way:

loadTask() {
  return Observable.create((observer) => {
    this.geoQuery.on("key_entered", function(key, location, distance) {
        this.usersRef = new Firebase('https://FBRUL.firebaseio.com/users/');
        this.publicationRef = new Firebase('https://FBRUL.firebaseio.com/task/');
        this.publicationRef.orderByKey().equalTo(key).on("child_added", (snapshot) =>{
          this.publications = snapshot.key();
          this.publicationRef.child(this.publications).on("child_added", snapshot => {
            this.__publi = snapshot.val();
            this.__key = snapshot.key();
            let publicio = [];
            this.publicationnass = {nom: this.__publi.nom, skills: this.__publi.skills, bugdet: this.__publi.budget, distance: Math.floor(distance), date: this.__publi.date, location: this.__publi.location, attribue: this.__publi.attribue, id1:this.publications, id: this.__key, offres: this.__publi.offres, user: this.__publi.user }
            publicio.push(this.publicationnass)
            observer.next(publicio)
          })
        })
    })
  })
 } 
}

and this is the plnkr of my case plunker link

As you can see the data are all in the console, but only one is displayed. Can anyone help me with this?

Answer 1

In fact you provide to the observer an array with one element three times. That's why the observable received and ngFor displays only one element:

To prevent from this, you could externalize the publicio variable from the observable. This way, you will see the three elements successively received:

loadTask(){
  let publicio = []; // <-----
  return Observable.create((observer) => {
    this.geoQuery.on("key_entered", function(key, location, distance){
      this.usersRef = new Firebase('https://FBRUL.firebaseio.com/users/');
      this.publicationRef = new Firebase('https://FBRUL.firebaseio.com/task/');
      this.publicationRef.orderByKey().equalTo(key).on("child_added", (snapshot) =>{
        this.publications = snapshot.key();
        this.publicationRef.child(this.publications).on("child_added", snapshot => {
          this.__publi = snapshot.val();
          this.__key = snapshot.key();
          //let publicio = []; // <------
          this.publicationnass = {nom: this.__publi.nom, skills: this.__publi.skills, bugdet: this.__publi.budget, distance: Math.floor(distance), date: this.__publi.date, location: this.__publi.location, attribue: this.__publi.attribue, id1:this.publications, id: this.__key, offres: this.__publi.offres, user: this.__publi.user }
          publicio.push(this.publicationnass)
          observer.next(publicio)
        })
      })
    })
  })
}

Answer 2

Another way to do it, apart from Thierry's answer. You could send the elements one at a time as objects not a arrays. Then,on your App component, you just push them to the posts array.

Your Plunker fixed

return Observable.create((observer) => {
    this.geoQuery.on("key_entered", function(key, location, distance){
        this.usersRef = new Firebase('https://jobandgo.firebaseio.com/users/');
        this.publicationRef = new Firebase('https://jobandgo.firebaseio.com/task/');
        this.publicationRef.orderByKey().equalTo(key).on("child_added", (snapshot) =>{
          this.publications = snapshot.key();
          this.publicationRef.child(this.publications).on("child_added", snapshot => {
            this.__publi = snapshot.val();
            this.__key = snapshot.key();
            // let publicio = []; 
            // I changed the below line from this.publicationnass = to let publicationnass because you dont need publicationnass to be on the class level
            let publicationnass = {nom: this.__publi.nom, skills: this.__publi.skills, bugdet: this.__publi.budget, distance: Math.floor(distance), date: this.__publi.date, location: this.__publi.location, attribue: this.__publi.attribue, id1:this.publications, id: this.__key, offres: this.__publi.offres, user: this.__publi.user }
            // no need for the line below
            // publicio.push(publicationnass)
            observer.next(publicationnass) 
          })
        })
    })
  })

then, on your app component:

constructor(public Dataservice: Dataservice) {
  this.Dataservice.loadTask().subscribe((res) => {
    this.posts.push(res)
    console.log(this.posts)
  })
}