I am seeing a duplicate array in my response from a HTTP get from a Firebase realtime database in an Angular web-app.

I have created a firebase realtime database with the following setup:

Firebase data

In my angular application I am performing a HTTP get to retrieve data from Firebase.

fetchEventsAdmin2() {
    return this.http
      .get<bookableEvent[]>(
        'https://ng-smile-for-life-default-rtdb.europe-west1.firebasedatabase.app/events.json'
      )
      .pipe(
        map(bookableEvent => {
          return bookableEvent.map(bookableEvent => {
            return {
              ...bookableEvent,
              BookingDates: bookableEvent.bookingDates ? bookableEvent.bookingDates : []
            };
          });
        }),
        tap(bookableEvent => {
          this.admService.setBookableEvents(bookableEvent);
        })
      )
  }

I call setBookableEvents to populate the local instance.

 setBookableEvents(bkEvent: bookableEvent[]) {
    this.bookableEvents = bkEvent;
    this.bookingChanged.next(this.bookableEvents.slice());
  }

The model looks like the following:

import { bookingDates } from "../shared/booking-dates.model";

export class bookableEvent {
    public eventName: string;
    public eventType: string;
    public eventLocation: string;
    public eventImage: string;
    public eventDuration: string;
    public maxAttendees: number;
    public currentAttendence: number;
    public questions: string;
    public eventOnOff: boolean;
    public locationImage: string;
    public descInstr: string;
    public bookingDates: bookingDates[]

    constructor(eName: string, 
                eType: string, 
                eLoc: string, 
                eImage: string, 
                eDuration: string,
                maxAttends: number, 
                currentAttends: number, 
                questions: string,
                eventOnOff: boolean, 
                locImage: string, 
                eDescrInstr: string, 
                bookingDates: bookingDates[])
    {
        this.eventName = eName;
        this.eventType = eType;
        this.eventLocation = eLoc;
        this.eventImage = eImage;
        this.eventDuration = eDuration;
        this.maxAttendees = maxAttends;
        this.currentAttendence = currentAttends;
        this.questions = questions;
        this.eventOnOff = eventOnOff;
        this.locationImage = locImage;
        this.descInstr = eDescrInstr;
        this.bookingDates = bookingDates
    }
}

When I examine the content retrieved response from Firebase in the console log (see image below) there is a duplicate array, with an uppercase BookingDates array, that I have haven't declared anywhere! It doesn't make any sense to me. It this a firebase or Angular HTTP bug or I am going crazy? Any help much appreciated. I'm probably doing something stupid. Thank you.

Duplicate Array console.log

CodePudding user response：

I will go ahead and suppose that the purpose of the map operator is to assign an empty array for the bookingDates in case it comes as null from the server. If that's the reason, then you could rewrite it like this:

fetchEventsAdmin2() {
    return this.http
      .get<bookableEvent[]>(
        'https://ng-smile-for-life-default-rtdb.europe-west1.firebasedatabase.app/events.json'
      )
      .pipe(
        map(bookableEvents => bookableEvents.map(bookableEvent => ({
          ...bookableEvent,
          bookingDates: bookableEvent.bookingDates ?? []
        })
        ),
        tap(bookableEvent => {
          this.admService.setBookableEvents(bookableEvent);
        })
      )
  }

Note that in your snippet, you wrote BookingDates with a capital B and I believe this was not the intended behavior.

If you don't need to replace that null bookableDates with an empty array, you can remove the map entirely.