CODEWITHSUNDEEP
javascriptarraystypescriptfirebaseionic4
Quan Hodges
Quan Hodges

Reputation: 347

I'm unable to manipulate data stored in an array from firebase

Here is a screenshot of the console log of the arrayI'm getting data from firebase with the following compound query:

  filterItineraries(filters: any): any {
    this.allItineraries = [];
    this.filteredItineraries = [];

    for ( let i = 0; i < filters.dateRange.length; i ++) {
    const query = this.dataSvc.getAllItineraries()
    .where('destination', '==', filters.destination)
    .where('dateRange', 'array-contains', filters.dateRange[i]);
    query.onSnapshot(itineraryListSnapshot => {
          itineraryListSnapshot.forEach(snap => {
              this.allItineraries.push({
                id: snap.id,
                activities: snap.data().activities,
                destination: snap.data().destination,
                startDate: snap.data().startDate,
                endDate: snap.data().endDate,
                jobId: snap.data().jobId,
                userId: snap.data().userId
            });
         });
      });
    }

I initially declared the array in which I'm storing the objects like this:

private matchItinerary: allItineraries = [];

then I tried declaring like this:

private allItineraries: { 'id': string, 'activities': any[], 'destination': string, 'startDate': string, 'endDate': string, 'jobId': string, 'userId': string }[] = [];

still did not work.

The issue is caused because of the limitations of the queries in firebase. As a result I end up with duplicate records that I need to remove. After I retrieve the data from firebase the array functions aren't recognized. I can't get elements, I can't use .length...it = 0. When I console.log(typeof allItineraries) it displays object.

        for (let i = 0; i < allItin.length; i++) {
          for (let k = 0; k < allItin.length - 1; k++) {
            if (allItin[k].id !== allItin[k + 1].id) {
              console.log('inside if', allItin[k + 1].id);
              this.filteredItineraries[k] = allItin[k + 1];
            }
          }
        }

The data will show in the UI, but I can't perform any array operations in my code. If I just do a console.log(allItineraries) it will in fact show all of the data but what I need to do is filter the data and it won't let me perform any Array operations.

I've been working on this for a few weeks now and posted numerous times to no avail. I don't know what to do at this point...nothing seems to work. I don't know if I'm declaring the array wrong. The data can be seen but not manipulated the way normal arrays allow.

Upvotes: 1

Views: 921

Answers (1)

Junius L
Junius L

Reputation: 16132

Save the data in a local variable and filter in inside the snapshot callback.

filterItineraries(filters: any): any {

for ( let i = 0; i < filters.dateRange.length; i ++) {
const query = this.dataSvc.getAllItineraries()
.where('destination', '==', filters.destination)
.where('dateRange', 'array-contains', filters.dateRange[i]);
query.onSnapshot(itineraryListSnapshot => {

   const allItineraries = [];
   const filteredItineraries = [];

      itineraryListSnapshot.forEach(snap => {
          allItineraries.push({
            id: snap.id,
            activities: snap.data().activities,
            destination: snap.data().destination,
            startDate: snap.data().startDate,
            endDate: snap.data().endDate,
            jobId: snap.data().jobId,
            userId: snap.data().userId
        });
      // filter your array here 
      // save it in state or assign it to filteredItineraries[]
      // doing the following won't force state re-render
      // this.filteredItineraries = allItineraries.filter(...);
     });
  });
}

Upvotes: 1

Related Questions