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
