I am currently utilizing Angular 7 and I have a REST API that provides the following data:
{"Plate":"MIN123","Certifications":[{"File":"KIO","Date":"12-02-2018","Number":1},{"File":"KIO","Date":"12-02-2018","Number":1},{"File":"preventive","StartDate":"06-02-2018","EndDate":"12-02-2018","Number":2},{"File":"preventive","StartDate":"06-02-2019","EndDate":"25-03-2019","Number":2}],"Locations":[{"place":"start","Date":"12-02-2018","Address":"Cra 99 No.69A 81"},{"place":"end","Date":"12-02-2018","Address":"Cra 89 No.69A 81"}],"Issues":[{"place":"end","Date":"12-02-2018","Address":"Cra 89 No.69A 81","Description":"Not reporting"}],"id":"5c7c990de5b1660fb032dc8b"}
accessible through this link: "http://localhost:3000/api/Cars/5c7c990de5b1660fb032dc8b". In my Angular application, it is structured in the following manner:
My service
//data-api.service.ts
import { Injectable } from '@angular/core';
import {HttpClient,HttpResponse, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/internal/Observable' ;
import { map } from 'rxjs/operators';
import { VehicleInterface } from '../Model/vehicle-interface';
@Injectable({
providedIn: 'root'
})
export class DataAPIService {
vehicles: Observable<any>;
vehicle: Observable<any>;
constructor(private http:HttpClient) { }
getVehicleByID(id: string){
const url_api = `http://localhost:3000/api/Cars/${id}`;
this.vehicle=this.http.get(url_api);
console.log(this.vehicle);
return (this.vehicle);
}
}
Based on my research regarding interfaces, here are my interface definitions:
Certifications
//certifications-interface.ts
export interface certificationsInterface{
File ?: string;
Date ?: string;
Number ?: number;
}
Disadvantages
//issues-interface.ts
export interface issuesInterface{
place ?: string;
Date ?: string;
address ?: string;
Description?:string;
}
Locations
//locations-interface.ts
export interface locationsInterface{
place ?: string;
Date ?: string;
address ?: string;
}
Vehicles
//vehicle-interface.ts
import {certificationsInterface} from "./certifications-interface";
import {issuesInterface}from "./issues-interface";
import {locationsInterface}from "./locations-interface";
export interface VehicleInterface{
Plate ?: string;
Status ?: number;
Certifications ?:certificationsInterface[];
Issues ?: issuesInterface[];
Locations ?: locationsInterface[];
}
Currently, I intend to display this information via the console before incorporating it into the HTML. To achieve this, I'm implementing my component as follows:
//vehicle-details.component.ts
import { Component, OnInit } from '@angular/core';
import { DataAPIService } from 'src/app/Services/data-api.service';
import { ActivatedRoute,Params } from '@angular/router';
import { VehicleInterface } from 'src/app/Model/vehicle-interface';
@Component({
selector: 'app-vehicle-details',
templateUrl: './vehicle-details.component.html',
styleUrls: ['./vehicle-details.component.css']
})
export class VehicleDetailsComponent implements OnInit {
constructor(private dataAPI:DataAPIService,private route: ActivatedRoute) { }
private vehicle: VehicleInterface={
Plate :'',
Status :null,
Certifications:null,
Issues:null,
Locations:null
}
ngOnInit() {
const vehicleID=this.route.snapshot.params['id'];
this.getDetails(vehicleID);
console.log(this.vehicle);
}
getDetails(id:string){
this.dataAPI.getVehicleByID(id)
.subscribe(vehicle => this.vehicle = vehicle);
console.log(this.vehicle);
}
}
The output currently displays an empty object. I suspect the issue may lie in how the component handles the data retrieval. I've provided as much detail about my problem as possible, and I would appreciate any assistance you can provide.