Iterating over Firestore array of maps

Question

I'm trying to restructure a database and having wicked trouble trying to populate a table with the data from it after doing so.

Here is the new structure of my database.

So, we can see newLayout > User ID > reviews, which is an array of maps. I can get as far as logging out a whole review array - but cant figure out how to access or even log out each individual object/map within a review array.


    this.firebaseService.getNewReports().subscribe(docs => {

      this.reports =  docs.map(item => {

        return {
          id:  item.payload.doc.id,
          ...item.payload.doc.data()
        };
      });   

      this.reports.forEach(element => {

        console.log(element.reviews);

      });

    });

Each review array being logged out

I cant even log out one single object - I assumed even console.log(element.reviews[0]) would work, but it says "cannot read property 0 of undefined". I can only get as far as logging out the whole reviews array.

What I'm looking for is to iterate and retrieve the contents of every review from each document at once and assign them into one big array of objects to use as a source for a MatTableDataSource.

Like so

    [
    {county: Cork, dateAdded: " ", ...}, 
    {county: Cork, dateAdded: " ", ...},
    {county: Clare, dateAdded: " ", ...}
    ]

This was an easy operation in my previous simple database structure as I could just retrieve the entire collection and assign it to an array. The structure was impractical for other features so now I'm including meaningful ID's.

Previous database structure

Any help would be greatly appreciated, the amount of time this has taken is getting very silly. I've trawled the internet and documents for solutions, but I'm starting to feel I'm just doing it wrong from the start with my database structure.

So what is the actual output (include as (stringified JSON) code, not image) and what is the expected output. I don't personally understand what you mean with `newLayout > ID > 0{ } 1{ } 2{ }` — AT82, Sep 17 '19 at 13:46
Apologies @AJT82 - I was so tired from trying to figure this out that the willpower to type cohesively was a struggle. I just edited the post and hopefully my dilemma is clearer now :) — Calvin, Sep 17 '19 at 18:58
Updated my answer according to the the output that you wish! :) Hope it helps! — AT82, Sep 17 '19 at 19:13

AT82 · Accepted Answer · 2019-09-17T19:12:20.357

1

EDIT:

If the output you want is a single array, like...

[
  {county: Cork, dateAdded: " ", ...}, 
  {county: Cork, dateAdded: " ", ...},
  {county: Clare, dateAdded: " ", ...}
]

..then in your forEach push the contents of each array into an array, here finalReports, using the spread operator like so:

  finalReports = [];

  // ...

  this.reports.forEach(element => {
    this.finalReports.push(...element.reviews)
  });

Also you can do it earlier if you wish:

  docs.map(item => {
    this.finalReports.push(...item.payload.doc.data().reviews)
  });

ORIGINAL POST:

After some thinking ;) I think figured out how you want the output to look like, i.e:

[
  {
    A11: [{county: ....}, {...}]
  }, 
  {
    A154: [{county: ...}, {...}]
  }   
]

That can be achieved the following way:

this.reports =  docs.map(item => {
  return {
    return { [item.payload.doc.id] : item.payload.doc.data().reviews }
  };
});

So we set the id as the prop name, and the array reviews from the payload as the prop value.

edited Sep 17 '19 at 19:12

answered Sep 17 '19 at 14:06

AT82

71,416
24
140
167

My god... thanks a million! You absolutely saved the day - the table is back in action. I hope someone else in my predicament finds this. You first suggestion is a nice trick too, I'll keep my eye out for scenarios to use it in. Out of curiosity though, for both your old suggestion and the new suggestion that doesn't use the forEach loop - both of them throw an error saying "Property 'reviews' does not exist on type { }". I get a red line under reviews at `item.payload.doc.data().reviews` Any quick idea why that would be? The other version works perfect, so no biggie if not. – Calvin Sep 17 '19 at 20:52
That error comes from typing issue. That is the awesome part of typescript, it helps you a lot when developing when you are assigning data. So how to actually solve this is to type your data (**avoid** using `any` at all cost!!) So I suggest to make an interface and then tell the compiler what you expect is of that type. – AT82 Sep 18 '19 at 09:22

Iterating over Firestore array of maps

1 Answers1