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.

API RESPONSE: 
[{
"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
}
}
}]


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


HTML
<li *ngFor='let item of items$ |async'>
<span>{{item.name}}</span>
</li>


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
Component.ts: 
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(); 
}
  getData() {
        this.store.dispatch(new companyAction.LoadCompanyAction());    
}
}



Model.ts
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/>
   <span>{{item.member['gf2']['showName']}}</span>
</li>



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'>
 <ul>
   <li *ngFor='let val of getGFValues(item.member)'>
         <span>{{val['showName']}}</span>
   </li>
 </ul>
</li>



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