I'm encountering an issue when trying to retrieve data from a JSON file. Upon clicking a button to display the data in a textarea, the first click does not yield any result, but subsequent clicks work as expected. The program functions by fetching an ID from the dashboard and then using that ID to fetch different JSON files for extraction. The program is displaying the following error:
ERROR TypeError: Cannot read property 'data' of undefined at StepService.webpackJsonp.102.StepService.populateList (step.service.ts:69) at CalibrationDetailComponent.webpackJsonp.101.CalibrationDetailComponent.next
step.service.ts
private jsonData: any; //JSON data
public list: String[] = []; //Stores the steps list
public listLength: number; //Number of steps in the list
public listCurrent: number = 0; //Current step within the list
//Retrieves the JSON file
public getJson(): Observable<any> {
return this.http.get(this.jsonUrl)
.map(response => response.json());
}
//Subscribes to the JSON
public subScribe2Json() {
this.getJson().subscribe(data => (this.jsonData = data));
}
//Populates the list with data from the JSON to extract specific steps
public populateList() {
this.jsonData.data.forEach(element => { //This line causes the error
this.list.push(element.name);
});
this.listLength = this.list.length;
}
//Returns the mainStepText for the current step
public getJsonData(): String {
this.mainStepText = this.list[this.listCurrent];
return this.mainStepText;
}
calibration-detail.component.ts
next button method
next() { //Advances to the next step
this.stepService.subScribe2Json();
if (this.stepService.listCurrent < 1) { //Ensures that the list is populated only once
this.stepService.populateList(); //Populates the list from the JSON array
}
if (this.stepService.listCurrent < this.stepService.listLength) { //Prevents exceeding the number of steps
this.stepService.subScribe2Json(); //Subscribe to the list
this.mainStepText = this.stepService.getJsonData(); //Retrieve data from the list and output it to the main textarea
this.stepService.listCurrent++; //Increment the step counter