Typescript converting a JSON object to Typescript class

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.

Those are not "JSON objects" but javascript objects. Any exceptions thrown? — zerkms
– zerkms, Commented Apr 24, 2017 at 0:37
you're trying to assign properties to a variable that has no value, write let mark: marker = {} instead — Mauricio Poppe
– Mauricio Poppe, Commented Apr 24, 2017 at 0:39

Aluan Haddad · Accepted Answer · 2017-04-26 20:56:01Z

2

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.

edited Apr 26, 2017 at 20:56

answered Apr 24, 2017 at 1:37

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

RyeGuy Over a year ago

It does not reach the console.log(this.markers) statement.

Aluan Haddad Over a year ago

@RyeGuy what happens? Does it reach the subscribe? Note I changed the names slightly for convention, be sure to update your template (or change the names back ;))

RyeGuy Over a year ago

I really appreciate the help. However it does not seem to reach the subscribe. I change the parameter back the Observable<any>

Aluan Haddad Over a year ago

@RyeGuy the type doesn't change the runtime behavior at all. Can you add the code that calls the changetoMarkers to your question? More context is required.

Aluan Haddad Over a year ago

@RyeGuy see updated answer. If that doesn't work your response has a different shape than you think.

|

Joo Beck · Accepted Answer · 2017-04-28 23:19:22Z

1

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.

edited Apr 28, 2017 at 23:19

answered Apr 28, 2017 at 23:12

Joo Beck

1,9131 gold badge18 silver badges21 bronze badges

Collectives™ on Stack Overflow

Typescript converting a JSON object to Typescript class

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related