如何从 JSON 数组中获取数据 - Angular 7+

Question

I'm completely beginning in Angular and API. I'm trying to resolve some problem. My task is simple i guess. I have to get currency exchange rates data from NBP Web API. JSON file looks like:

I've found solution how to get some data from JSON, but i still have problem with array. The json file was converted to typescript and the result was :

So my Code look's like that:

Exchange.model.ts

 export interface Exchange {
  table: string;
  no: string;
  effectiveDate: string;
  rates: Rate[];
}

export interface Rate {
    currency: string;
    code: string;
    mid: number;
  }

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Exchange, Rate } from './exchange.model';

import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  exchanges$: Exchange;
  rates$: Rate;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    return this.dataService.getExchanges().subscribe(data => this.exchanges$ = data)


  }

  ngOnInit2() {
    return this.dataService.getRates().subscribe(data => this.rates$ = data)


  }
}

and app.component.html

<div *ngFor='let exchanges of exchanges$'>
        <h2">{{exchanges.table}}  <br> {{exchanges.no}} <br> {{exchanges.effectiveDate}}</h2">
            {{exchanges.rates}}

</div>

The browser display the data like that:

The result is almost good. But the data from "rates" in JSON doesn't work.

"rates":[ 
{ 
"currency":"bat (Tajlandia)",
"code":"THB",
"mid":0.1261
},"

How to solve a problem? How to get data from array in JSON into typescript? What input into array in Exchange.module.ts? I know that, a question is long, but I wanted to display necessary code and images.

Answer 1

You already have an Array as you see it displays a list of objects on your page. Since Rate is also an object you need to display its properties to see something meaningful.

If you want to display all the rates you can do another *ngFor for the rates like you do for exchanges.

For Example:

<div *ngFor="let exchanges of exchanges$">
   <h2>{{exchanges.table}}  <br> {{exchanges.no}} <br> {{exchanges.effectiveDate}}</h2>
   <div *ngFor="let rate of exchanges.rates">{{rate.code}} {{rate.mid}} {{rate.currency}}</div>
</div>

You did not explain very well what kind of output you want to get. If you want some additional processing it is better you move it inside the component code.