Typescript将JSON对象转换为Typescript类

Question

Hello I am attempting to change an array of JSON objects to a TypeScript class. However the method seems to crash every I attempt to assign a Json object attribute to a typescript attribute.

Typescript interface

export interface marker {
    lat: number;
    lng: number;
}

Typescript method

public markers: marker[];

ngOnInit() {
    this.mapService.GetPhotosById(this.id).subscribe(resultlisting => {
        this.values = resultlisting;
        console.log(this.values); //SHOW IN PICTURE
        this.ChangetoMarkers(this.values);
    }, error => this.errorMessage = error);
}

ChangetoMarkers(someArray: Observable<any[]>) {

    for (let entry of someArray) {
        let mark: marker;
        mark.lat = Number(entry.latitude); //Attempt to convert to number
        mark.lng = +entry.longitude; //2nd attempt to convert to number
        this.markers.push(mark);
    };
    console.log(this.markers); //DOES NOT REACH THIS
}

Map Service

GetPhotosById(id: string): Observable<any> {
    return this.http
        .post(this.config.apiEndpoint + "mapPhotos/" + id)
        .map(this.extractJson).catch(this.handleErrors);

};
private extractJson(res: Response) {
    let data = res.json();
    return data;
}
private handleErrors(error: Response | any) {
    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.log(errMsg);
    return Observable.throw(errMsg);
}

I have researched the issue and have attempted to apply the interger cast but it does not seem to work. Any suggestions would be great.

Answer 1

As Mauricio Poppe noted in his comment, you are trying to access the properties of a variable that has no value.

changeToMarkers(points: Array<{latitude: number, longitude: number}>) {
  this.markers = entries.map(({latitude: lat, longitude: lng}) => ({
    lat,
    lng
  }));

  console.log(this.markers);
}

No number conversions are necessary because the deserialized representations of latitude and longitude are already compatible numeric values.

Answer 2

Try this:

ChangetoMarkers(someArray: any[]) {
    console.log("array",someArray);
    for (let entry of someArray) {
        let mark: marker = {lat: entry.latitude, lng: entry.longitude};
        console.log("mark", mark);
        this.markers.push(mark);
    };
    console.log("markers",this.markers); 
}

It isn't as elegant as Aluan Haddad's, but it should allow you to determine at which point it is breaking if for some reason this still doesn't work, by logging someArray before the loop, the marks before being pushed, and this.markers after to determine exactly where the problem is breaking down.