学习 Angular 并完成了英雄教程后,我想尝试一个真实世界的 http 请求,所以我使用了 MetOffice DataPoint API。正在返回一个 JSON 对象,该对象当前不会转换为数组供我循环访问。我收到以下错误:
Cannot read property 'data' of undefined
现在已经研究了一段时间并尝试了非常相似问题的许多不同建议,最接近的是 this one ,下面是我尝试过的各种事情,并评论了每次尝试失败的原因。我已在 JSONLint 中确认 JSON 有效。
型号
export class Site {
elevation: number;
id: number;
latitude: number;
longitude: number;
name: string;
region: string;
unitaryAuthArea: string;
}
服务
@Injectable()
export class MetOfficeService {
private testUrl = 'http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/sitelist?key=xxx';
constructor(private http: Http) { }
getSites(): Observable<Site[]> {
return this.http.get(this.testUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response){
let body = res.json().Location; Cannot read property 'data' of undefined
//let body = res.json()['Location']; Cannot read property 'data' of undefined
//let temp = res.json()['Location'];
//let body = JSON.parse(temp); Unexpected token o on line 1 ... this is because of unrequired parsing i have discovered
//return body || { }; this is nonsense.
return body.data || { };
}
private handleError (error: Response | any) {
// In a real world app, you might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}
组件
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MetOfficeService]
})
export class AppComponent implements OnInit {
title = 'test!';
errorMessage: string;
sites: Site[];
ngOnInit() { this.getSites(); }
constructor(private moService: MetOfficeService) { }
getSites(){
this.moService.getSites()
.subscribe(
sites => this.sites = sites,
error => this.errorMessage = <any>error);
}
};
查看
<h1>
{{title}}
</h1>
<div id="sites">
<ul>
<li *ngFor="let site of sites">
{{site.name}} ||| {{site.unitaryAuthArea}}
</li>
</ul>
</div>
一如既往,非常感谢所有帮助。
编辑:一段 JSON,它有 4,000 个左右的位置对象。
{
"Locations": {
"Location": [{
"elevation": "7.0",
"id": "3066",
"latitude": "57.6494",
"longitude": "-3.5606",
"name": "Kinloss",
"region": "gr",
"unitaryAuthArea": "Moray"
}, {
"elevation": "6.0",
"id": "3068",
"latitude": "57.712",
"longitude": "-3.322",
"obsSource": "LNDSYN",
"name": "Lossiemouth",
"region": "gr",
"unitaryAuthArea": "Moray"
}, {
"elevation": "36.0",
"id": "3075",
"latitude": "58.454",
"longitude": "-3.089",
"obsSource": "LNDSYN",
"name": "Wick John O Groats Airport",
"region": "he",
"unitaryAuthArea": "Highland"
}]
}
}
更新显示响应的开发者工具
最佳答案
没有res.json().Location
但是res.json().Locations
(注意“s”)此外,没有对象 data
你正试图从响应中提取,但是 Location
.所以如果你想提取数组,你的 extractData
应该是这样的:
private extractData(res: Response){
let body = res.json().Locations.Location;
return body || [];
}
关于arrays - Angular 将带有字段的 API JSON 响应对象转换为数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43390102/