How to exclude certain keys/values when iterating through array and displaying on table in Angular-CodePudding

Have just run into a bit of a roadblock and any advice would be much appreciated

I am currently building out an application in angular to fetch data from an API and display it on the page

I have a service called "Api Service using the HTTPClient to call the API

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');
}

}

Then I have another component to observe this call and map 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()
  }




}

I am then displaying the data in a table

data.component.html

<table>
    <tr *ngFor= "let item of data | keyvalue" >
        <td>{{item.key}} : {{item.value}}</td>
</table>

Now at the moment I am iterating thrugh the array using *ngFor but there are keys/values that I want to exclude from being displayed

For example I want to display key2 and value 2 but not key 1 and value 1

[Key1 : value1], [Key2 :value2]

How would I go about doing this? Any advice would be much appreciated

CodePudding user response：

in my opinion you have at least 2 options, filter the observable:

this.service.getData().pipe(
    filter(o => {
        return // your condition here
    })
).subscribe(result=>{

the second option is to write a custom pipe. You can create a pipe that extend the keyvalue pipe and filters the data as you need. You will find numerous tutorial where they explain how to create a pipe.

CodePudding user response：

    I think you can use Angular Slice Pipe[1]
    
    <table>
        <tr *ngFor= "let item of data | keyvalue | slice: 1" >
            <td>{{item.key}} : {{item.value}}</td>
    </table>

Hope this help, Thanks!

  [1]: https://angular.io/api/common/SlicePipe

CodePudding user response：

First of all: use types for your variables. It gives you the benefit of knowing exactly which kind of data you are handling and it helps us to understand what exactly you want to achieve.

Here is my take on this: I suggest you to put this kind of logic into your service, so that this logic can be reused somewhere else. I also suggest you to use some kind of reactive approach, so that you don't have to manually unsubscribe your requests. The following approach is based on the assumption that your API returns an array, not an object.

apiservice.service.ts

...
export class ApiserviceService {
  data$ = this._http.get('APIURL').pipe(
    map(data => data.filter(item => item.key !== 'Key1'))
  );

constructor(private _http:HttpClient) { }
...

data.component.ts

...
public data$ = this.service.data$;
...

data.component.html

<table>
    <tr *ngFor= "let item of data$ | async" >
        <td>{{item.key}}</td>...
</table>

I suggest you to not use pipes in this case, since pipes should be generic and your filtering logic seems to be too specific for a pipe.