Filter by specific JSON value to binding Angular 5

Question

I have a JSON object with this aspect:

I would like to be able to perform a binding for the key value, that is, to be able to do array.company (and to show the content of value for example: "Anonymous 3 Company S.A"). Is this possible? I have only managed to print the whole object at once:

<div *ngFor="let sa of serverAttributes">
    {{ sa.key}}
    {{sa.value}}
</div>

This is my .ts file:

this.subscriptions = this.cbank.getAssetServerAttributes(this.localCustomer, data[indexx]).subscribe(vres => {
    this.serverAttributes.push(vres[indexx]);
    indexx++;
});

Thank you very much!

try this https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor — Rahul Sharma, Jun 04 '18 at 07:40
In my case, what should I put in the variables filterargs and items? https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor — Ruben GH, Jun 04 '18 at 07:54

score 0 · Answer 1 · answered Jun 04 '18 at 08:02

0

create a custom pipe to return the list of key and value You could also return an entry containing both key and value:

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}
and use it like that:

<span *ngFor="let entry of content | keys">           
  Key: {{entry.key}}, value: {{entry.value}}
</span>

answered Jun 04 '18 at 08:02

mittal bhatt

955
6
13

need to import KeysPipe in your app.module.ts file or your root module. – mittal bhatt Jun 04 '18 at 08:33
can you send your array? – mittal bhatt Jun 04 '18 at 09:45
export class CapacitorBankFileComponent implements OnInit { capacitorBanks = []; this.subscriptions = this.cbank.getAssetServerAttributes(this.localCustomer, data[indexx]).subscribe(vres => { this.serverAttributes.push(vres[indexx]); indexx ++; }); – Ruben GH Jun 04 '18 at 09:48
please check in this https://stackblitz.com/edit/angular-wdxcaa?file=src%2Fapp%2Fapp.component.ts – mittal bhatt Jun 04 '18 at 13:41

Filter by specific JSON value to binding Angular 5

1 Answers1