Angular unable to display API results in html - html

Question

In Angular, why am I unable to display the results from an API call?
The JSON returned from the API call. I want to display the value attribute.
{
"data": [
{
"type": "fuzzycompletions",
"attributes": {
"value": "APALE"
},
"relationships": {
"lei-records": {
"data": {
"type": "lei-records",
"id": "9695006WHN4DWDKBF403"
},
"links": {
"related": "https://api.gleif.org/api/v1/lei-records/9695006WHN4DWDKBF403"
}
}
}
},
{
"type": "fuzzycompletions",
"attributes": {
"value": "APPLITEC"
}
},
{
"type": "fuzzycompletions",
"attributes": {
"value": "AppLogic"
},
"relationships": {
"lei-records": {
"data": {
"type": "lei-records",
"id": "724500S2JQ8M9Q67N911"
},
"links": {
"related": "https://api.gleif.org/api/v1/lei-records/724500S2JQ8M9Q67N911"
}
}
}
},
{
"type": "fuzzycompletions",
"attributes": {
"value": "APPRECIO"
},
"relationships": {
"lei-records": {
"data": {
"type": "lei-records",
"id": "969500ZFBM0TC2T1HV85"
},
"links": {
"related": "https://api.gleif.org/api/v1/lei-records/969500ZFBM0TC2T1HV85"
}
}
}
},
{
"type": "fuzzycompletions",
"attributes": {
"value": "AMPLEGEST"
},
"relationships": {
"lei-records": {
"data": {
"type": "lei-records",
"id": "969500DYMLRK8URCGP47"
},
"links": {
"related": "https://api.gleif.org/api/v1/lei-records/969500DYMLRK8URCGP47"
}
}
}
},
{
"type": "fuzzycompletions",
"attributes": {
"value": "ANPLEX OÜ"
},
"relationships": {
"lei-records": {
"data": {
"type": "lei-records",
"id": "254900RNJSFWJXOZE551"
},
"links": {
"related": "https://api.gleif.org/api/v1/lei-records/254900RNJSFWJXOZE551"
}
}
}
},
{
"type": "fuzzycompletions",
"attributes": {
"value": "Apleks OÜ"
},
"relationships": {
"lei-records": {
"data": {
"type": "lei-records",
"id": "254900VZB706EXH22533"
},
"links": {
"related": "https://api.gleif.org/api/v1/lei-records/254900VZB706EXH22533"
}
}
}
},
{
"type": "fuzzycompletions",
"attributes": {
"value": "APPLE-WAY"
},
"relationships": {
"lei-records": {
"data": {
"type": "lei-records",
"id": "969500QV2N8IIVULLH93"
},
"links": {
"related": "https://api.gleif.org/api/v1/lei-records/969500QV2N8IIVULLH93"
}
}
}
},
{
"type": "fuzzycompletions",
"attributes": {
"value": "APPLICOMM"
},
"relationships": {
"lei-records": {
"data": {
"type": "lei-records",
"id": "969500MCJ58VYVTX3715"
},
"links": {
"related": "https://api.gleif.org/api/v1/lei-records/969500MCJ58VYVTX3715"
}
}
}
},
{
"type": "fuzzycompletions",
"attributes": {
"value": "APPLIQ AS"
},
"relationships": {
"lei-records": {
"data": {
"type": "lei-records",
"id": "8945006S1SZMS8HKLR20"
},
"links": {
"related": "https://api.gleif.org/api/v1/lei-records/8945006S1SZMS8HKLR20"
}
}
}
}
]
}
I have a service.ts file for connecting to the API
import { HttpClient} from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class GleifService {
private gleifUrl = 'https://api.gleif.org/api/v1/fuzzycompletions?field=entity.legalName&q='; // URL to web api
private data:any = []
constructor(private http: HttpClient) {}
getGleif(name: string){
const url = `${this.gleifUrl}${name}`;
this.http.get(url).subscribe((res)=>{
this.data = res
console.log(this.data)
})
}
}
A component.ts file
import { Component, OnInit } from '#angular/core';
import { GleifService } from '../gleif.service';
#Component({
selector: 'app-security',
templateUrl: './security.component.html',
styleUrls: ['./security.component.css']
})
export class SecurityComponent implements OnInit {
// array for storing the data
private data:any = []
constructor(private gleifService: GleifService) { }
getGleif(name: string): void {
this.data = this.gleifService.getGleif(name);
}
ngOnInit() {
this.getGleif(name);
}
}
And a .html file for displaying the results
<div>
<label>Company ID:
<input placeholder="Autofill"/>
</label>
</div>
<div>
<label>Company Name:
<input #Name placeholder="A Company Ltd"/>
<button (click)="getGleif(Name.value); Name.value=''">Search</button>
</label>
</div>
<div *ngFor="let entry of data?.data" style="text-align:center">
<h3>
header works: {{ entry.type }}
</h3>
</div>
I can see the results in the console response. How can I access and display results from the API call?

Answer 1

It is because you are subscribing your http call from your service instead of returning it's data. Once you have subscribed the call in your service, no data will be returned unless you return the observable value from your http and let the component subscribe it's response or data
Update your code instead to:
Service
import { Observable } from 'rxjs';
...
getGleif(name: string): Observable<any> {
const url = `${this.gleifUrl}${name}`;
return this.http.get(url);
}
Component
...
getGleif(name: string): void {
this.gleifService
.getGleif(name)
.subscribe(res => this.data = res);
}
or in your Component you could also do this:
...
data$: Observable<any>;
getGleif(name: string): void {
this.data$ = this.gleifService.getGleif(name); // we have assigned it with an Observable variable since the return of this service is of Observable type that needed to be subscribe into
}
Template
...
// Since the data$ is async, we use pipe async to fetch it's raw data
<div *ngFor="let entry of (data$ | async)?.data" style="text-align:center">
...
</div>

Answer 2

make sure to return the data from the service and subscribe inside the component file.
and you don't need to call the function inside ngOnInit because you are going to call it when search button is clicked.
componet.ts file
import { Component } from "#angular/core";
import { GleifService } from "./service";
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
// array for storing the data
private data: any = [];
constructor(private gleifService: GleifService) {}
getGleif(name: string): void {
this.gleifService.getGleif(name).subscribe((response: any) => {
this.data = response.data;
});
}
}
component.html file
<div>
<label
>Company ID:
<input placeholder="Autofill" />
</label>
</div>
<div>
<label
>Company Name:
<input #Name placeholder="A Company Ltd" />
<button (click)="getGleif(Name.value); Name.value=''">Search</button>
</label>
</div>
<div *ngFor="let entry of data" style="text-align: center;">
<h3>
header works: {{ entry.type }}
</h3>
</div>
service.ts file
import { HttpClient } from "#angular/common/http";
import { Injectable } from "#angular/core";
#Injectable({
providedIn: "root"
})
export class GleifService {
private gleifUrl =
"https://api.gleif.org/api/v1/fuzzycompletions?field=entity.legalName&q="; // URL to web api
constructor(private http: HttpClient) {}
getGleif(name: string) {
const url = `${this.gleifUrl}${name}`;
return this.http.get(url);
}
}
working codesandbox

Answer 3

Maybe you need to subscribe to the result in the component.ts file
getGleif(name: string): void {
this.gleifService.getGleif(name).subscribe((result) => {
this.data = result
});
}