Home  >  Forum  >  Angular
Post New Query

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

Write Answer








©2019 concretepage.com | Privacy Policy | Contact Us