Angular - Displaying Object within Object in json

Question

I'm trying to use angular ngFor to parse this data:

Link: https://blockchain.info/rawaddr/3MvuMn4CESuvA89bfA1cT8mgC4JtKaReku

I'm able to retrieve the data fine by subscribing to it, but when I try to display attributes that has an object in it. I receive [object, Object].

How I am currently attempting this

<div *ngFor="let t of transactions" >
  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title></mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">From</th>
            <th scope="col">To</th>
            <th scope="col">Receiver</th>
            <th scope="col">Hash</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{t.inputs}}</td>
            <td>-></td>
            <td>{{t.out}}</td>
            <td></td>
          </tr>
        </tbody>
      </table>

component.ts

export class InputComponent implements OnInit {

  address = "3MvuMn4CESuvA89bfA1cT8mgC4JtKaReku";
  transactions: any ;
  inputs: any;
  public arrayOfKeys
  constructor(private blockchain: BlockchainService) { }

  ngOnInit() {
  }

  submit(){
    console.log(this.address)
  }

  getTransactions(){
    this.blockchain.getTransactions().subscribe((data) => {
      this.transactions = data["txs"]
      console.log(this.transactions)
      console.log(this.transactions['inputs'])

    });
  }
}

A simple test with console.log to see if this.transactions['inputs'] gives me an undefined

New attempt below. It's closer to working but not fully there yet.

<div *ngFor="let t of transactions">
    <div *ngFor="let field of t.inputs ; let i = index">
        <p>{{ field.sequence }}</p>
        <p>{{ field.witness}}</p>
        {{i}}
        {{field.prev_out[i].addr}}
        <hr>
        <div *ngFor="let out of field.prev_out">
          {{out.addr}}
          </div> 
    </div>
</div>

The error it gives me

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

Because inputs and out are objects. You would have to do {{ t.inputs.fieldYouWant }} to get a certain field of the input object.

If you want the entire input you would have to store it in your component and do an ngFor on that.

I'm not sure if you can do something like this but you can try it out:

<div *ngFor="let t of transactions">
     <div *ngFor="let field of t.inputs">
         {{ field }}
     </div>
</div>

Answer 2

Well, its because the t.inputs and t.out are objects and not string. If you want to just show the plain text data then you can use "json" filter of anuglarjs or convert these values in string using "JSON.stringify"

Using angularjs json filter -

<pre>{{ {'name':'value'} | json }}</pre>

Answer 3

The t.inputs is not an object, it is an array of object. So I think this should work.

<div *ngFor="let t of transactions">
<div *ngFor="let field of t.inputs ; let i = index">
    <p>{{ field.sequence }}</p>
    <p>{{ field.witness}}</p>
    {{i}}
    <hr>
    {{field.prev_outt.addr}}
</div>
</div>

Answer 4

A simple test with console.log to see if this.transactions['inputs'] gives me an undefined

Quick Solution if you are getting the date in console instead of undefined than the approach of getting the data might be wrong. The data object in getTransactions() is of undefined type. Instead of t.out , assign value to a variable resp by writing t['out'] , giving complete name eg ['inputs']['0']['sequence'] in your component. Than use resp in component.html

Solution

Cast the result data by defining interface for json and than use . to access the values