So erhalten Sie Daten von JSON in Angular2

Question

Ich habe eine JSON-Antwort wie folgt.

{ 
    "response": { 

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

        "studentaddresse": [ 
         { 

          "address": "test" 

         } 
        ] 

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

        "studentaddresse": [ 
         { 

          "address": "test1" 

         } 
        ] 

       } 
      ] 
     } 
    } 
} 

Auf Knopfdruck muss ich diese Daten holen. dass für In component.ts Datei ich diesen Code

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

Und in student.service.ts Datei Ich habe diesen Code

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

Und in login.Service.ts haben Datei Ich habe diesen Code // Auf Schaltfläche klicken ich rufe getStudentResponseData() diese Methode In der Konsole bin d ata.but in getStudentData() Methode bin keine Daten bekommen

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; 
     } 

Kann jemand bitte helfen Sie mir mit diesem, wo ich falsch mache? Und ich möchte Werte in HTML anzeigen, wie Studentennummer hier angezeigt wird.

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

Answer 1

Da diese Methode asynchron ist. Sie können die Daten in .Promise().then (... you can handle data here ...)

erhalten Sie können keine Daten von getStudentData() Funktion wegen dieser async Methode erhalten.

Answer 2

loadStudents() gibt ein Versprechen zurück. Also in Ihrer Komponente muss der Code wie sein:

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