Angular 6 API JSON ngFor Not Showing

Question

I am working on a project using Angular 6 for the first time, and I am creating an application that gets JSON data from an online URL, listing each entry on a HTML page. Each entry has a variable key value, paired with an array of variables. The problem is that, despite not showing any errors, the *ngFor statement does not show any of the entries, yet the {{ jsonData | json }} shows that the data is returned successfully. Here is my code.

api-retrieval-service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpResponse} from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { CoinListing } from './coinListing';

@Injectable({
  providedIn: 'root'
})
export class ApiRetrievalService {
  constructor(private _http: HttpClient) { }

  coinList() {
    return this._http.get('https://min-api.cryptocompare.com/data/all/coinlist').pipe(catchError(this.errorHandler));
  }

  errorHandler(error: HttpErrorResponse) {
     return throwError(error);
  }
} 

coinlist.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiRetrievalService } from '../api-retrieval.service';
import { CoinListing } from '../coinListing';

@Component({
  selector: 'app-coinlist',
  templateUrl: './coinlist.component.html',
  styles: []
})
export class CoinlistComponent implements OnInit {
  title = 'Coin Listing';
  public _jsonData:CoinListing[] = [];
  constructor(private _apiRetrieval: ApiRetrievalService) { }
  ngOnInit() {
    this._apiRetrieval.coinList()
      .subscribe(
        result =>  {
          this._jsonData = result.Data;
          console.log('Success', result.Data);
        },
        error => this.errorMsg = error.statusText
     );
  }
}

coinListing.ts

export interface CoinListing {
  [key:string]: {
    Algorithm: string;
    BuiltOn: string;
    CoinName: string;
    FullName: string;
    FullyPremined: string;
    Id: string;
    ImageUrl: string;
    IsTrading: string;
    Name: string;
    PreMinedValue: string;
    ProofType: string;
    SmartContractAddress: string;
    SortOrder: string;
    Sponsored: string;
    Symbol: string;
    TotalCoinSupply: string;
    TotalCoinsFreeFloat: string;
    Url: string;
  }
};

coinlist.component.html

<div style="text-align:center">
  <h1>
    {{ title }}
  </h1>
</div>
<br/>
<p *ngFor="let coin of _jsonData">
 Found {{ coin }}
</p>

Anyone know what is stopping the CoinListings from being displayed via *ngFor? Or how I can show each CoinListing's variables in the HTML page, given their structure?

Answer 1

If I understand this correctly, "Each entry has a variable key value, paired with an array of variables" then coins is an object or array. If that is the case then

Found {{ coin }} 

will not return a value. You would need to call a variable from inside coin. For example if 'title' was a key inside of coin then you could do

Found {{ coin.title }}

Answer 2

You need to bind the properties or use the json pipe the {{_jsonData | json}} {{_jsonData | json}} is working because you are telling the binding to give it that structure with the json pipe

To learn more about JSON pipes: https://angular.io/api/common/JsonPipe

You can do this:

<p *ngFor="let coin of _jsonData">
  Found {{ coin | json }}
<p>

or binding each property you want to show

 <p *ngFor="let coin of _jsonData">
      Found:
      {{  coin.Algorithm }}
      {{  coin.BuiltOn }}
      .
      .
      .
      {{  coin.Url }}
 <p>

UPDATE: Based on the structure of your object

<div *ngFor="let coin of objectKeys(_jsonData)">
    {{_jsonData[coin] | json}}
</div>

In your ts file:

objectKeys(obj) {
    return Object.keys(obj);
}

Answer 3

You need to use property like below

<p *ngFor="let coin of _jsonData">
 Found {{ coin.Title }}
</p>