Home  >  Forum  >  Angular
Post New Query

How to fetch data from nested Json

Asked on June 08, 2018
I have a api which is working fine in service but i want to display from nested arrays. Where name is displaying on page but i want to display showName instead of name.

"ggId": 1,
"name": "brain father",
"member": {
"gf1": {
"gfId": "gf1",
"firstName": "Danny",
"lastName": "Johns",
"showName": "Danny-Johns",
"suffix": "JR.",
"Added": true
"gf2": {
"gfId": "gf2",
"firstName": "Mary",
"lastName": "Marlo",
"showName": "Mary-Marlo",
"suffix": "JR.",
"Added": true
"numbers": {
"a1": {
"numbersId": "a1",
"numbersShow": "Dnn1093746",
"numbersTo": ["gf1", "gf4"],
"directlyAdded": false

export class NewService {
           private _myUrl = 'http://myJsonApi';
    constructor(private _http: HttpClient) {}
           getData(): Observable<Idata[]>{
                  return this._http.get<Idata[]>(this._myUrl)
                          tap(data => {}),
       private handleError(err : HttpErrorResponse){   
                     return Observable.throw(err.message);

<li *ngFor='let item of items$ |async'>

And Also please suggest any improvements i can do here.

Replied on June 08, 2018
Using Angular 4

Replied on June 08, 2018
What is the structure of Idata and how are you getting items$?

Replied on June 08, 2018
I am using Ngrx and so i am calling service in effects

Replied on June 08, 2018
export class NewClass implements OnInit {

vm: any = {};
items$: Observable<Idata[]>

constructor(private store: store<fromRoot.AppState>) {}

ngOnInit(): void {
  this.items$ = this.store.select(fromRoot.getCompanyList)
  getData() {
        this.store.dispatch(new companyAction.LoadCompanyAction());    

export interface Idata {
                  ggId: number;
                 name: string;
             member: any;
         showName: string;

Replied on June 09, 2018
Try this to fetch showName

<li *ngFor='let item of items$ |async'>
   <span>{{item.member['gf1']['showName']}}</span> <br/>

Replied on June 09, 2018
Right.This can only display gf1 and gf2. But what if there are more gf (gf3,gf4). I need something which can display all gf's.
I tried many ways in html but my items are elements of an array and member is a collection of gf-object.I don't think i can iterate with ngFor through it. There must be some other way. One way is using lodash but don't know how to use it with Ngrx . Any Idea or any other way ?

Replied on June 10, 2018
One more approach

1. Create a method in component

  getGFValues(ob): any[] {
  return Object.values(ob);

2. In HTML template, call it with ngFor

<li *ngFor='let item of items$ |async'>
   <li *ngFor='let val of getGFValues(item.member)'>

You can also use Object.keys() in getGFValues() method.

Replied on June 10, 2018
Thanks.The method was correct though i am using Ngrx so did the change in reducer and it worked.
Appreciate your help @Anupam

Write Answer

©2019 concretepage.com | Privacy Policy | Contact Us