Parsing JSON to Object in Angular 2

Question

I have a file location.json, containing JSON string of the form:

{
  "locations": [
    {
      "id": 1,
      "places": [
        {
          "id": 1,
          "city": "A",
          "state": "AB"
        }
      ]
    }
}

I created classes of the form:

export class Location{
       constructor(public id: number,
        public places: Place[],
     }

export class Place {
        constructor(
        public id: number, 
        public city: string,
        public state: string
}

How do I parse the JSON string to object? I did something like this:

...
export class DashboardComponent {

  locations: Locations[];

  constructor(private locationService:LocationService) {
    this.getLocations() 
  }

  getLocations(){
      this.locationService.get('assets/location.json')
      .subscribe(res => this.location = res);
  }

maybe try with a JSON.Parse(res)

federico scamuzzi
– federico scamuzzi

2017-05-16 16:45:14 +00:00
Commented May 16, 2017 at 16:45 — federico scamuzzi
– federico scamuzzi, Commented May 16, 2017 at 16:45
This did not map my json.

kenadet
– kenadet

2017-05-16 16:47:15 +00:00
Commented May 16, 2017 at 16:47 — kenadet
– kenadet, Commented May 16, 2017 at 16:47

Nitzan Tomer · Accepted Answer · 2017-05-16 16:54:16Z

6

Depending on what's the result for the subsriber it can be:

.map(res => this.location = res.json().locations);

Or:

.subscribe(res => this.location = JSON.parse(res).locations);

But keep in mind that that won't instiantiate instances for your classes, it will only assign the values as regular js object which match the following:

interface Location {
    id: number;
    places: Place[];
}

interface Place {
    id: number;
    city: string;
    state: string;
}

If you want instances of the classes you'll need to do something like:

JSON.parse(res)
    .locations.map(location => new Location(location.id, 
        location.places.map(place => new Place(place.id, place.city, place.state)))

answered May 16, 2017 at 16:54

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

2 Comments

kenadet Over a year ago

I got this error: EXCEPTION: Unexpected token o in JSON at position 1 when I did JSON.parse

Nitzan Tomer Over a year ago

Again, it depends what you're getting there. Add this: console.log(res, typeof res) to see what's the actual response

Roman C · Accepted Answer · 2017-05-16 17:06:09Z

0

usually you map response with res => res.json() somewhere in the service method but json should have a valid format, otherwise it won't parse.

Note, that response is an Object and you can't parse it but only body of the response.

  return this.http.get(url,options).map((response) => this.parseResponse(response))
        .catch((err) => this.handleError(err));

  private handleError(error: any) {
    let body = error.json();

    return Observable.throw(body);
  }

  private parseResponse(response: Response) {
    return response.json();
  }

edited May 16, 2017 at 17:06

answered May 16, 2017 at 16:44

Roman C

1

4 Comments

kenadet Over a year ago

Can you give an example?

kenadet Over a year ago

Thanks, but I still have seen the mapping...I should be able to locations in NgFor.

Roman C Over a year ago

if it issues anything but json has a different structure, so you better transform the results

Roman C Over a year ago

.subscribe(res => this.locations = res.json().locations);

Collectives™ on Stack Overflow

Parsing JSON to Object in Angular 2

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related