get objects value from objects key using *ngFor

Question

I have following Database structure :

I am a bit confused about how to get the value of an object from April and May key. While using *ngFor for iterating over the object. I have All keys as objects . l tried to use keyvalue but doesn't working .

Full Code :

  orderhistory: AngularFireList<any>;
  keyArray: any[]; // to use with *ngFor

  ngOnInit() {

    this.orderhistory = this.af.list("/orderhistory")
    this.orderhistory.snapshotChanges()
    .pipe(
      map(changes =>
        changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }))
      ), tap(val => this.keyArray = []), map(data => {
        data.forEach((row, dataObj) => {
          Object.keys(row).forEach((r, objIndex) => {
            if (r === '$key') {
              this.keyArray.push({ row: row['$key'], 'value': [] });
            } else {
                this.keyArray[dataObj]['value].push({ 'subRowKey': r, 'subRowValue': row[r] })
            }
            return row;
          })
          return row;
        })
        onsole.log(this.keyArray)

        return data;
      })
    ).subscribe((data: any) => {

        console.log(data)
      });
  }

Html

    <tbody *ngFor="let row of keyArray; let i = index">
        <tr role="row"  *ngFor = "let subRow of row.value |keyvalue; ">
            {{subRow.subRowValue|json}}
        </tr>
    </tbody>

Output

As you see above , my data now become under subRowValue . So how can i avoid or access to key for get data there ? is possible to use |keyvalue ?

Use {{subRow.subRowValue.value | json}} in the template. With keyvalue pipe you need specify key and value to retrieve them. — Michael D
i have error : ERROR TypeError: Cannot read property 'value' of undefined . if i put only {{subRow.subRowValue| json}} l get nothing show in html — Ali Ghassan
It appears there is a mix-up of variable names in the *ngFors. I've posted an answer. Please see if it works for you. — Michael D
same issue , nothing shows in html and no error in console log — Ali Ghassan

Michael D Michael D · Accepted Answer · 2020-05-16T11:15:48

You are close. You need to explicitly specify key and value when using keyvalue pipe. And based on your console log, it appears there is a mix-up of variable names in the *ngFors. Please try the following

<tbody *ngFor="let value of keyArray.value; let i = index">
  <tr role="row"  *ngFor = "let subRow of value.subRowValue | keyvalue; ">
    {{ subRow.value | json }}
  </tr>
</tbody>

get objects value from objects key using *ngFor

1 Answers