Angular2 Getting very deep nested json value using pipe! *ngFor

Question

Hi I am having trouble getting json value which is really deeply nested using pipe.

What am I doing wrong?

Pipe I'm using

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

Json I'm getting from server.

data:
  0: {
    Profile: { ...
    }
    BasicInfo: { ...
    }
    introduceInfo: {
      curriculum: { ...
      }
      experience: {
        0: {
          category: "Mentor"
          year: "2011"
          duration: "24"
        }
        1: {
          category: "Student"
          year: "2011"
          duration: "14"
        }
      }
    }
  }

It's actually a huge json object but I've simplified to only show what I need to get.

I want to get the value of category (which is "Mentor"and "Student".

And to do so, I've tried in my html

<div *ngFor="let detail of teaInfo | keyValues">
  <div *ngFor="let experience of detail.value['introduceInfo'] | keyValues">
    <div *ngFor="let exp of experience.value['experience'] | keyValues">
      <p class="fontstyle2">{{exp.value['category']}} {{exp.value['year']}}년 | {{ex.value['duration']}}개월</p>
    </div>
  </div>
</div>

And I'm getting my json object in my component like this.

teaInfo: any[];
getTeacherDetail(): void {
  let params = new URLSearchParams();
  params.set('gradeType', `${this.getVal2()}`)
  params.set('subjectType', `${this.getVal3()}`)
  params.set('district', `${this.getVal1()}`)

  this.teaDetail.getTeachersDetail(params)
    .subscribe(
      teaInfo => this.teaInfo = teaInfo,
      error => this.errorMessage = error
    )
}

And the result is I am getting nothing

What am I doing wrong?

Could you add a snippet of the actual JSON so that we could copy paste and test the code perhaps ;) — AVJT82
– AVJT82, Commented Apr 13, 2017 at 20:59
I don't seeb you referencing the root "data" key in your json anywhere in your code at first glance. You also have a typo in ex.value, should be exp. — phuc77
– phuc77, Commented Apr 14, 2017 at 0:18
I suggest you also try to use Chrome developer tools to inspect and set break points to debug. Pretty fast to find out what you're getting into your pipe function. — phuc77
– phuc77, Commented Apr 14, 2017 at 0:23
I am using Chrome developer tool and they don't show any errors :( — Lea
– Lea, Commented Apr 14, 2017 at 3:49

AVJT82 · Accepted Answer · 2017-04-14 11:00:09Z

2

Trying to interpret how your JSON looks like, something like this:

{
  "data":{
    "0": {
      "Profile":{
        "prof":"prof"
      },
      "BasicInfo":{
        "basic":"basic"
      },
      "introduceInfo":{
        "curriculum": {
          "curr":"curr"
        },
        "experience":{
          "0":{
            "category":"Mentor",
            "year":"2011",
            "duration":"24"
          },
          "1":{
            "category":"Student",
            "year":"2011",
            "duration":"14"            
          }
        }
      }
    }
  }
}

In below example, I have extracted the values from data, so:

.map(res => res.json().data)

To reach values Mentor and Student, first change your pipe to this:

export class KeysPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

and change your HTML to this:

<div *ngFor="let detail of teaInfo | keyValues">
 <div *ngFor="let experience of detail['introduceInfo']['experience'] | keyValues">
    {{experience.category}}
 </div>
</div>

This should work nicely:

Demo

answered Apr 14, 2017 at 11:00

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lea Over a year ago

Can I ask you what I should do if it's one more time nested? Should I do this? <div *ngFor="let experience of detail['introduceInfo']['experience']['subject'] | keyValues">

AVJT82 Over a year ago

since you already have let experience of ..... in the above iteration, so you can use that in the next iteration to reach whatever you have nested inside experience, so it should then look something similar to let subject of experience['subject'] | keyValues or something like that. Check the plunker. I updated it :) The code is inside a comment in template, so if you remove the comment tags you can see it in action :)

Collectives™ on Stack Overflow

Angular2 Getting very deep nested json value using pipe! *ngFor

1 Answer 1

Demo

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related