检查返回json对象的数据typescript和angular2

时间:2017-04-27 18:20:25

标签: json angular typescript

所以我打电话来检查并查看我是否返回了包含实际数据的对象 - 我不确定我是否做错了但这就是我正在尝试的。

以下是我对我的服务的致电 - COMPONENT FILE:

#Redirect from old domain to new domain with full path and query string:
Options +FollowSymLinks
RewriteEngine On
RewriteRule ^(.*) http://www.newdomain.com%{REQUEST_URI} [R=302,NC]

我目前在我的控制台中看到resultData: any = []; barChartLabels: any =[]; getData(){ this.dataService.getData().subscribe((data) => { this.resultData = data; for(let item of this.resultData) { this.barChartLabels.push(item.name); } } } ,但在将项目名称推入另一个数组后知道,该数组在我的html中用于绑定,但它没有显示。

这是我的服务电话 - 服务文件:

this.resultData

这也是我在json文件中的内容:

getData(){
        return this.http.get('my url')
            .map((res:Response) => res.json());
    }

这是我的HTML:

[
  {
    "id": 1,
    "name": "Test 1",
    "score": 34
  },
  {
    "id": 2,
    "name": "Test 2",
    "score": 92
  }
]

现在可能已经转变为另一个主题。

2 个答案:

答案 0 :(得分:1)

如果你真的希望它在组件中,那么代码需要在箭头函数的主体中。像这样:

getData(){
    this.dataService.getData().subscribe(data => {
       this.resultData = data;
       for(let resultItem of this.resultData){
         console.log(resultItem);
       }
    })
  }

这是因为订阅是异步的。首次运行getData方法时,this.resultData没有值。在返回Http响应之前不会设置this.resultData

答案 1 :(得分:0)

您可以使用do运算符查看返回的数据。你可以尝试这样的事情:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

...

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}