get Map data from Firestore

Question

i have a localStorage array with the objects. Then i add() this array to firestore.in result i have a document like this firestore document i have 2 Maps here. So how i can get it to display. when i use this code, i can display only timestamp

this.sells = this.sellsCollection.snapshotChanges().pipe(
      map(
        changes => {
          return changes.map(a => {
            const data = a.payload.doc.data() as Sell
            const id = a.payload.doc.id;
            return data
          })
        }
      )
    )

i can view all the data when i use | json pipe. but cant see Map data with interpolation

UPD: console log of data

Answer 1

Try this in your map observable operator:

changes => {
  return changes.map(a => {
      const temp = a.payload.doc.data() as Sell

      // Each temp has the following shape (it looks like an array
      //   but it isn't really one. It's a more general object that
      //   is not an iterable out-of-the-box):
      // {
      //   1:    {...},
      //   2:    {...},
      //   3:    {...},
      //   ...
      //   date: '...'
      // }
      // We want to convert this object, to another object
      //   with the following shape: {items: any[], date: string}
      // To do that, what we can do is iterate over all of the keys
      //   of the incoming object (shown above) except for the 'date' 
      //   key and put all of their values in the items array. 
      // We can do that by getting all of the keys as an array
      //   (Object.keys) and iterate through them, filtering out the
      //   'date' key. For the other keys, that actually pass by the
      //   filter, we use the map function to turn them into their actual
      //   values.
      const items = Object.keys(temp)
          .filter(key => key !== 'date')
          .map(key => temp[key]);

      // Now we just have to build up the object to be returned, including
      //   the date, that was filtered out in the code above.
      return {items, date: temp.date};
    }) // end of Array.map
}

Then, in your template ou can do:

<div *ngFor="let sell of sells">
  <div *ngFor"let item of sell?.items">
    {{item?.stock}}
  </div>
</div>