Angular2 How to get only one value from ngFor

0
votes

I am currently getting deep nested json objects from the server and using pipe to parse them.

But it is looping every key even tho I want to get only one value. How could I achieve this?

These are codes

Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'keyValues'})
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;
   }
 }

Html template

 <div *ngFor="let detail of teaInfo | keyValues">
     <div *ngFor="let basicinfo of detail.value | keyValues">
            <p>School: {{basicinfo.value}}</p>
     </div>
 </div>

Result

school:example1

school:example2

school:example3

school:example4

school:example5

school:example6

I also tried this

  <div *ngFor="let detail of teaInfo | keyValues">
         <div *ngFor="let basicinfo of detail.value | keyValues">
                 <p>School: {{basicinfo.value['example2']}}</p>
          </div>
      </div>

result

 school:

 school:example2

 school:

 school:

 school:

 school:

still looping without giving value..

But I just want to get

school:example2

without looping anything..

Help will be appreciated!

1
angularngfor

1 Answers

2
votes

This might do what you want:

<div *ngFor="let basicinfo of detail.value | keyValues | splice:2:1">