How to get data from json in Angular2

Question

I have a Json response like this.

{
    "response": {

        "my_students": {
            "students": [
                {
                    "studentNumber": "123",
                    "studentName": "ABC"

                    "studentaddresse": [
                        {

                            "address": "test"

                        }
                    ]

                },
                 {
                    "studentNumber": "345",
                    "studentName": "CDS"

                    "studentaddresse": [
                        {

                            "address": "test1"

                        }
                    ]

                }
            ]
        }
    }
}

On button click I have to fetch these data. For that In component.ts file I have this code

studdata=[];
 ngOnInit(){
       this.studdata= this.studentService.loadStudents();
}

And in student.service.ts file I have this code

  loadStudents(): any{
      return this.loginService.getStudentData();
   }

And in login.Service.ts file I have this code //On button click i am calling getStudentResponseData() this method In console am getting data.but in getStudentData() method am not getting data

 student_data: Object;

     public getStudentResponseData() : Promise<any> {
          if(typeof(this.student_data) === "undefined") {
                return this.http.get('assets/studentapi.json')
                .toPromise().then(res => {

                                      this.student_data = res.json().response;
                       console.log("data"+this.student_data);                
                                      return  this.student_data;
                    }).catch(this.handleError);
          } else {
              return Promise.resolve(this.student_data);
          }
    }
    public getStudentData(): Object {
            return this.student_data;
        }

Can anyone please help me with this,where i am doing wrong? And I want to display values in html ,How to display student number here.

<div *ngFor="let stu of studdata">
<div>{{stu.studentNumber}}</div>
</div>

Why don't you directly call the login service? The student service seems unnecessary to me. — JSON Derulo, Aug 31 '17 at 07:38
If directly i ll call then also I am not getting data.@D.Simon — ananya, Aug 31 '17 at 08:52

score 2 · Answer 1 · answered Aug 31 '17 at 07:33

2

loadStudents() returns a Promise. So in your component the code has to be like:

 ngOnInit(){
       this.studentService.loadStudents()
           .then((students) => {
               this.studdata = students;
           });
}

answered Aug 31 '17 at 07:33

JSON Derulo

9,780
7
39
56

I tried like this also.But the thing is data is not coming to this method.@D.Simon public getStudentData(): Object { return this.student_data; } – ananya Aug 31 '17 at 09:01

score 1 · Answer 2 · answered Aug 31 '17 at 07:32

1

Because this method is async. You can get the data in .Promise().then ( ... you can handle data here ...)

You can not get data from getStudentData() function because of that async of method.

answered Aug 31 '17 at 07:32

RTE

75
10

You can see the usage of Promise and resolving async methods in the link https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323 – RTE Aug 31 '17 at 07:35

How to get data from json in Angular2

2 Answers2