How to convert this API get() result into JSON object? - json

Question

API endpoint returning an observable. When I am trying to retrieve any property of the returned object, it is showing that the property does not exist on type {}
This is the endpoint result
{
"base": "EUR",
"date": "2018-04-08",
"rates": {
"CAD": 1.565,
"CHF": 1.1798,
"GBP": 0.87295,
"SEK": 10.2983,
"EUR": 1.092,
"USD": 1.2234,
}
}
service.ts
import { Injectable } from '#angular/core';
import { HttpClient, HttpResponse } from '#angular/common/http';
import { Observable } from 'rxjs';
import { ConvertResultModel } from './converter/convert-result-model';
#Injectable({
providedIn: 'root'
})
export class ServiceProviderService {
private baseUrl = 'https://api.exchangeratesapi.io/latest';
constructor(private http: HttpClient) { }
getLatest():Observable<ConvertResultModel>{
return this.http.get<ConvertResultModel>(this.baseUrl);
}
}
converter.component.ts
import { ServiceProviderService } from './../service-provider.service';
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-converter',
templateUrl: './converter.component.html',
styleUrls: ['./converter.component.css']
})
export class ConverterComponent implements OnInit {
constructor(private serviceProvider: ServiceProviderService) { }
private resultSet = {};
ngOnInit()
{
this.serviceProvider.getLatest().subscribe(data => this.resultSet = data);
console.log(this.resultSet.base);
}
}
convert-result-model.ts
export interface ConvertResultModel {
base: number;
date: string;
rates: any[];
}
ERROR in src/app/converter/converter.component.ts(17,32): error TS2339: Property 'base' does not exist on type '{}'.

Answer 1

Its all about type checking in typescript. Which is something good but sometimes you don't want to define type of everything.
So you may want to replace
private resultSet = {};
With something like
private resultSet:any = {};
// or
//private resultSet:any = null;
Or define a class or interface and set type of resultSet to that class or interface. Something like:
public interface ResultSet{
base: String;
// etc
}
and then
private resultSet:ResultSet= {} as ResultSet;
// or
//private resultSet:ResultSet= null;
But my suggestion is try to practice using power of typescript which helps you catch some errors in compile time instead of runtime