0

I'm working with Ionic and Firebase and I'm facing several problems with linked data, either to manipulate or print. I have read articles and watched several videos of different approaches between versions but couldn't solve it yet, and I have to recognize that right now I have a terrible mess (I am a beginner of course). Let me explain more details:

Versions:

"angularfire2": "^5.0.0-rc.6"
"firebase": "^4.10.1"
"ionic-angular": "3.9.2",

Firebase structure sample:

Firebase structure sample

What I need to print:

Right now I'm able to retrieve and print the order list using an and of course the field "user" is displayed as "-L5uzsn0C4-FYiS7HiY" but what I need to display is the name of the user "Carlos".

Approaches:

  • First of all I tried displaying nested *ngFor, something like:

...but is not displaying properly as is always printed, even if there is no user for that order.

  • After that tried to print a function getUserName(order.payload.val().user), but it seems is not possible to call/print functions there...

  • After that I investigated if there is a way to throw queries to firebase with "JOINS", like in SQL databases. Watched several videos but did not find the solution. For example in this official video they use db.child but this function does not seem to be available, I suppose is a version issue...

  • For the last try, I thought that the best way would be to retrieve by code the orders list, then retrieve the user object with the list.user and push it to the list before printing but that's pretty difficult. But I'm not even able to manipulate the data of the retrieved list !!

I retrieve the orders list:

ordersList: any;
this.ordersList = this.afd.list('/orders/2018/03-marzo/').snapshotChanges();

At this point ordersList is printed properly with an *ngFor but I would like to access key and values by code. I watched this video of Ionic3 and angularfire5 where .map is used (see minute 2:02), I am using this code but it is not working, doesn't retrieve an error but prints nothing

this.ordersList$ = this.afd.list('/orders/2018/03-marzo/')
  .snapshotChanges() //Key and value (valueChanges only value)
  .map(
    changes => {
      console.log(changes.map(c => ({
        key: c.payload.key,
        ...c.payload.val(),
      })));
    });
  • Could you please help me to retrieve lists and transform values?
  • Is there any available documentation for angularfire5 for me to watch updated information?, I have seen a lot of samples of previous versions.

Thanks in advance.

Related issues The related issue seems to be developed for previous angularfire versions, since I were not able to use the ".map" function as shown Displaying nested data from firebase to ionic

Carlos
  • 23
  • 3
  • Possible duplicate of [Displaying nested data from firebase to ionic](https://stackoverflow.com/questions/48148473/displaying-nested-data-from-firebase-to-ionic) – ZF007 Mar 12 '18 at 12:18
  • Looks good, but in this link they are using "let ref = firebase.database().ref('/');". I already have an AngularFireDatabase object afd but "this.afd.ref('/')" displays an error "TypeError: this.afd.ref is not a function". Should I use another object type? – Carlos Mar 12 '18 at 13:30
  • I have an answer that throws me another question. – Carlos Mar 13 '18 at 00:09
  • if that is the case you could post that as a new question and refer to current question. Also, post your answer as a self-answer. This might help others to solve the other question maybe faster. For reference you can use "[" + text + "]" followed by "(" + hyperlink + ")". – ZF007 Mar 13 '18 at 00:15

1 Answers1

0

I have an answer for this question, in spite of trigger another question.

Here is the code I needed to manipulate a firebase list data, do something you want, and load it to an array:

this.afd.list('/orders/2018/03-marzo/')
      .snapshotChanges()
      .subscribe( res =>
        res.map(action => {
          //another query to firebase to retrieve the name of the user with id = action.payload.val().repartidor
          orders.push({key: action.key,
                       tienda: action.payload.val().tienda,
                       cajas: action.payload.val().cajas,
                       repartidor: //name stored previously
                     })
        }),
        error => console.log(error));

That's what I wanted at the beginning, with this I am able to reach every field of an order.

Now I have a problem printing the orders in html, they are printed but duplicated when I update any information. Anyway I think I have to clarify if my DB structure is what I need.

Carlos
  • 23
  • 3