Question

学习Angular并通过英雄教程我想尝试一个真实世界的http请求，所以我正在使用MetOffice DataPoint API。正在返回一个JSON对象，该对象当前不会转换为数组供我循环。我收到以下错误：

无法读取未定义的属性“数据”

现在进行了一段时间的研究，并从非常相似的问题中尝试了许多不同的建议，最接近的是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"
        }]
    }
}

更新显示回复的开发人员工具

Answer 1

没有res.json().Location但res.json().Locations（注意＆＃34; s＆＃34;）此外，您没有尝试从响应中提取的对象data ，但是Location。因此，如果要提取数组，extractData应如下所示：

private extractData(res: Response){
    let body = res.json().Locations.Location;  
    return body || [];
}

Answer 2

因为你的extractData回调函数需要一个未传递的参数

getSites(): Observable<Site[]> {
        return this.http.get(this.testUrl)
                    .map(this.extractData(data))
                    .catch(this.handleError);
    }

具有字段到数组的Angular Convert API JSON响应对象

2 个答案: