8

I have a firebase database... So it's all JSON. I retrieve the data using AngularFire2 database...I'm reading this tutorial...

The part of the code for this question is :

noteList: Observable<Note[]>

  constructor(public navCtrl: NavController, private noteListService: NoteListService) {
    this.noteList = this.noteListService.getNoteList()
      .snapshotChanges()
      .map(
      changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }))
      });

From here I want to do 2 things :

  • 1st : declare an array variable outside of the contructor, just like noteList Ex : myVar: Note[] = new Array();
  • 2nd : Iterable though the result of the getNoteList() and push them into that variable for futher use... I hope to have myVar holding multiple objects of Note ...=> those are JSON from Firebase therefore JavaScript objects...

How do I do that ?

What I've go so far is using the following :

this.noteList .forEach(value => console.log(value)); This will log each element of noteList as Array [Object] ....

When I do this.noteList .forEach(value => this.myVar.push(value)); it says :

Argument of type 'Note[]' is assignable to parameter of type 'Note'. Property 'id' is missing in type 'Note[]'

The comple class code is :

export class HomePage {

  noteList: Observable<Note[]>
  myVar : Note[] = new Array();

  constructor(public navCtrl: NavController, private noteListService: NoteListService) {
    this.noteList = this.noteListService.getNoteList()
      .snapshotChanges()
      .map(
      changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }))
      });
  }

  this.noteList .forEach(value => this.myVar.push(value));

  //Then below, I want to use it in a Jquery 

  $(function() {
     // Also, I don't know how to access neither noteList nor myVar here. Any help here will be appreciated also
  }
}

Could you guyz help be do this please...

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
tom johnes
  • 387
  • 1
  • 3
  • 12
  • The question is likely XY problem. You're trying to integrate modern approach (this is Angular+Ionic, isn't it?) with old-school 'jQuery programming'. This should never be done. jQuery is absolute no-no in Angular app for numerous reasons. Regarding *Then below* and *I don't know how to access neither noteList nor myVar here*, this is a dupe of http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call . You need to embrace observables, not create bridges to jQuery which you're likely more familiar with. You can access a value in observable `.subscribe` – Estus Flask Apr 29 '18 at 18:34
  • @estus ohh tell me about that... Programming has gone a LONG way I know I need to update my skills... I'll think about your advice about jquery... But for the `.subscribe` part, any heads up from you would be appreciated.... How would I iterate though `.subscribe` result to allow me to construct `myVar` with `Array.push` method ? – tom johnes Apr 29 '18 at 19:00
  • You don't need to iterate it. It's `.subscribe(notes => { this.myVar = notes })` – Estus Flask Apr 29 '18 at 19:07
  • @estus Thank you Mate... It worked... You can add it as an answer if if you want vote my OP up ;-) – tom johnes Apr 29 '18 at 20:27

1 Answers1

9

The proper way to do this with RxJS is to subscribe an observable and do all necessary actions with result inside subscribe callback. If the observable isn't reused, it isn't necessary to save it to noteList, but a subscription possibly needs to be saved in order to unsubscribe it and avoid memory leaks:

  noteListSubscription: Subscription;

  constructor(private noteListService: NoteListService) {
    this.noteListSubscription = this.noteListService.getNoteList()
      .snapshotChanges()
      .map(
      changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }))
      })
      .subscribe(notes => { this.myVar = notes });
  }

  ngOnDestroy() {
    noteListSubscription.unsubscribe();
  }

Subscription type should be imported from rxjs module.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565