How to get data from array in 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.

Can you provide the api request in the dataService? Since in the below images you are just showing the calling from the appComponent. — Mostafa Harb
– Mostafa Harb, Commented Jan 19, 2020 at 21:56
export class DataService { apuUrl = 'http://api.nbp.pl/api/exchangerates/tables/a/last/5/?format=json'; constructor(private _http: HttpClient) { } getExchanges() { return this._http.get<Exchange>(this.apuUrl); } getRates() { return this._http.get<Rate>(this.apuUrl); } } The good man bellow wrote a correct code. So now everything work's good ! Thanks for answer. — Paweluk
– Paweluk, Commented Jan 20, 2020 at 13:14

Aleš Doganoc · Accepted Answer · 2020-01-19 21:58:42Z

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.

answered Jan 19, 2020 at 21:58

Aleš Doganoc

12.1k30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paweluk Over a year ago

Thanks! It works. I wasn't sure what should be include in second ngFor . Now the data from rate appear's. That's what I wanted to achieve.

Collectives™ on Stack Overflow

How to get data from array in JSON - Angular 7+

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related