Angular 5 - Reading data from Nested JSON
Asked on May 26, 2018
Hello,
Am facing pblm reading data from nested JSON and loading to a ngx_table.
My JSON looks like:
[
{
"Patientage": 29,
"Patientname": "Moran",
"Drugs": [
{
"DrugName": "Dolo",
"Dosage": "150 mg daily",
"MedicationDuration": "3 years",
"MedicationType": "Current"
},
{
"DrugName": "Paracetamol",
"Dosage": "200 mg daily",
"MedicationDuration": "2.5 years",
"MedicationType": "Current"
}
],
"Reactions": [
{
"Start Date": "10-10-2017",
"End Date": "15-10-2017"
}
]
}
]
My AppComponent.ts:
export class AppComponent implements OnInit {
constructor (private httpService: HttpClient) { }
arrCase : object [];
Drugs : object [];
Drug : string[] ;
ngOnInit () {
this.httpService.get('./assets/Case.json').subscribe(
data => {
this.arrCase = data as object []; // FILL THE ARRAY WITH DATA.
console.log(this.arrCase);
this.Drugs = data["Drugs"] ;
console.log(this.Drugs)
this.Drug = this.Drugs["DrugType"];
console.log(Drug);
},
(err: HttpErrorResponse) => {
console.log (err.message);
}
);
}
}
Am not able to obtain list of Drugs or individual drug from list of Drugs.(resp. msgs are not printed to console).
Also pls.let me know how would i construct a ngx_datatable for Drugs (list of drugs should be populated on table and Add/Update/Delete to be performed. Pls share existing references...)
Thanks in advance...
Asha
Replied on May 27, 2018
Try this.
export class AppComponent implements OnInit {
constructor (private httpService: HttpClient) { }
arrCase : object [];
Drugs : object [];
ngOnInit () {
this.httpService.get('./assets/Case.json').subscribe(
data => {
let res = data[0];
this.Drugs = res['Drugs'];
console.log(this.Drugs);
console.log(this.Drugs[0]['DrugName']);
console.log(this.Drugs[0]['Dosage']);
console.log(this.Drugs[0]['MedicationDuration']);
console.log(this.Drugs[0]['MedicationType']);
console.log(this.Drugs[1]['DrugName']);
console.log(this.Drugs[1]['Dosage']);
console.log(this.Drugs[1]['MedicationDuration']);
console.log(this.Drugs[1]['MedicationType']);
},
(err: HttpErrorResponse) => {
console.log (err.message);
}
);
}
}
Replied on May 29, 2018
Thanks Anupam..!....It works.
Replied on May 29, 2018
Hi Anupam,
Can you pls help me with organizing this to a data service / later using same for CRUD on a MatTable.
export class DataService {
private readonly API_URL = './assets/Case.json';
dataChange: BehaviorSubject<Drug[]> = new BehaviorSubject<Drug[]>([]);
// Temporarily stores data from dialogs
dialogData: any;
Drugs : object [];
constructor (private httpClient: HttpClient) {}
get data(): Drug[] {
return this.dataChange.value;
}
getDialogData() {
return this.dialogData;
}
/** CRUD METHODS */
getAllDrugs(): void {
this.httpClient.get<Drug[]>(this.API_URL).subscribe(data => {
let res = data[0];
this.Drugs = res['Drugs'];
// this.dataChange.next(data)
this.dataChange.next(this.Drugs)
console.log(this.Drugs)
},
(error: HttpErrorResponse) => {
console.log (error.name + ' ' + error.message);
});
}
pls note, this.dataChange.next(data) is necessary to load drugs to table and it worked with simple json.
(when my json had only drugs, No reaction or patient info).
When I have nested JSON, we can obtain Drugs alone using the solution you have provided. Subsequently how
to use "this.Drugs" with datachange.next ? - pls guide me.
Thanks
Asha
Replied on August 28, 2019
Thanks anupam.,working fine
