Currently facing a hurdle and seeking advice
I am developing an angular application that fetches data from an API and presents it on the page
The service I am utilizing is named "Api Service" which uses HTTPClient to make API calls
apiservice.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ApiserviceService {
constructor(private _http:HttpClient) { }
getData(){
return this._http.get('APIURL');
}
}
Additionally, I have another component that observes this call and maps the data to an array
data.component.ts
import { Component, OnInit } from '@angular/core';
import { map, toArray } from 'rxjs';
import { ApiserviceService } from '../apiservice.service';
@Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.scss']
})
export class VenueComponent implements OnInit {
data: any = [];
constructor(private service:ApiserviceService) {}
MapData() {
this.service.getData().subscribe(result=>{
this.data=result;
console.log(this.data);
})
}
ngOnInit() {
this.MapData()
}
}
The data is then displayed in a table
data.component.html
<table>
<tr *ngFor= "let item of data | keyvalue" >
<td>{{item.key}} : {{item.value}}</td>
</table>
Currently, I am using *ngFor to iterate through the array, but want to exclude certain keys/values from being displayed
For instance, I wish to show key2 and value2 but not key1 and value1
[Key1 : value1], [Key2 :value2]
Any suggestions on how to achieve this would be highly appreciated