2017-08-31 76 views
2

从JSON数据我有这样一个JSON响应。如何获得Angular2

{ 
    "response": { 

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

        "studentaddresse": [ 
         { 

          "address": "test" 

         } 
        ] 

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

        "studentaddresse": [ 
         { 

          "address": "test1" 

         } 
        ] 

       } 
      ] 
     } 
    } 
} 

按钮点击我必须获取这些数据。 对于在component.ts文件,我有这样的代码

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

而且在student.service.ts文件,我有这样的代码

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

而且在login.Service.ts文件我有这样的代码 //在按钮点击我打电话getStudentResponseData()这种方法 在控制台我得到d ata.but在getStudentData()方法不是在获取数据

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

任何人都可以请帮我这个,我哪里做错了吗? 而我想在HTML中显示值,如何在这里显示学号。

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

你为什么不直接调用登录服务?学生服务对我来说似乎没有必要。 –

+0

如果我直接调用会随后还我没有得到数据。@ D.Simon – ananya

回答

1

因为这种方法是异步的。你可以得到的数据在.Promise().then (... you can handle data here ...)

由于方法的异步,你不能从getStudentData()函数获取数据。

+0

你可以看到无极的使用和解决链接https://stackoverflow.com/questions/14220321/how-do-i异步方法-return最响应从 - 一个异步呼叫/ 14220323#14220323 – RTE

2

loadStudents()返回的承诺。所以在你的组件中代码必须是这样的:

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

我试图这样also.But事情是数据没有来到这个方法@ D.Simon 公共getStudentData():对象{ 返回this.student_data; } – ananya