Json Parsing in Angular2

Question

I have a array of jsons that I want to parse to my class Tournament.

The class Tournament looks like this:

export class Tournament { constructor (public id: number,
           public name: string,
           public date: string,
           public pointsWin: string,
           public pointsDraw: string,
           public groupSize: string,
           public groupPhase: string,
           public system: string,
           public teams: Team[]
   ){ }
}

The class Team looks like this:

export class Team { constructor (public id: number,
           public name: string,
           public rank: number,
           public occupied: boolean,
           public group: string
){ }
}

And the JSON that i receive looks like this:

[{"id":1,
"name":"Schulcup1",
"date":
{"year":2017,"month":"MARCH","era":"CE","dayOfYear":83,"dayOfWeek":"FRIDAY","leapYear":false,"dayOfMonth":24,"monthValue":3,"chronology":{"calendarType":"iso8601","id":"ISO"}},
"pointsWin":0,
"pointsDraw":0,
"groupSize":0,
"groupPhase":null,
"system":null,
"teams":[
{"id":1,"name":"Team1","rank":8,"occupied":false,"group":"A"},
{"id":2,"name":"Team2","rank":1,"occupied":false,"group":"A"},
{"id":3,"name":"Team3","rank":4,"occupied":false,"group":"A"},
{"id":4,"name":"Team4","rank":16,"occupied":false,"group":"A"},
{"id":5,"name":"Team5","rank":2,"occupied":false,"group":"B"},
{"id":6,"name":"Team6","rank":16,"occupied":false,"group":"B"},
{"id":7,"name":"Team7","rank":8,"occupied":false,"group":"B"},
{"id":8,"name":"Team8","rank":4,"occupied":false,"group":"B"}],
"active":true},
{"id":2,
"name":"Schulcup2",
"date":
{"year":2017,"month":"MARCH","era":"CE","dayOfYear":82,"dayOfWeek":"THURSDAY","leapYear":false,"dayOfMonth":23,"monthValue":3,"chronology":{"calendarType":"iso8601","id":"ISO"}},
"pointsWin":0,
"pointsDraw":0,
"groupSize":0,
"groupPhase":null,
"system":null,
"teams":[
{"id":48,"name":"Team1","rank":16,"occupied":false,"group":"A"},
{"id":49,"name":"Team2","rank":2,"occupied":false,"group":"A"},
{"id":50,"name":"Team3","rank":4,"occupied":false,"group":"A"},
{"id":51,"name":"Team4","rank":1,"occupied":false,"group":"A"},
{"id":52,"name":"Team5","rank":16,"occupied":false,"group":"B"},
{"id":53,"name":"Team6","rank":8,"occupied":false,"group":"B"},
{"id":54,"name":"Team7","rank":16,"occupied":false,"group":"B"},
{"id":55,"name":"Team8","rank":16,"occupied":false,"group":"B"}],
"active":true}]

If I try to parse the JSON with JSON.parse() I get an error that there is an unexpected token in JSON at position 0 most likely because of the [ since it is an array of JSON but how can I iterate through it?

And also how can I iterate through the teams in the JSON to create an array of teams?

The JSON you show is valid; without a minimal reproducible example, we cannot help. — jonrsharpe
– jonrsharpe, Commented Mar 25, 2017 at 16:39
Yes I know it is valid but i don't know how to parse it since it didn't work with JSON.parse() — Adrian I.
– Adrian I., Commented Mar 25, 2017 at 16:47
It's probably already parsed and you can use it as is without parsing it. — user663031
– user663031, Commented Mar 25, 2017 at 16:57

P. Steininger · Accepted Answer · 2017-03-28 09:05:47Z

1

It is already parsed. Just use it as an object!

answered Mar 28, 2017 at 9:05

P. Steininger

1721 silver badge8 bronze badges

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

Comments

AVJT82 · Accepted Answer · 2017-03-25 20:40:13Z

No need to use classes here, simply cast your JSON to interfaces, if you really do not need classes. Casting to interfaces is easy and painless ;) And no need of using JSON.parse here.

So use interfaces if you can, here is Tournament:

export interface Tournament {
  public id: number,
  public name: string,
  public date: string,
  public pointsWin: string,
  public pointsDraw: string,
  public groupSize: string,
  public groupPhase: string,
  public system: string,
  public teams: Team[]
}

Service:

getTournaments(): Observable<Tournament[]> { 
  return this.http.get('src/data.json')
    .map(res => res.json() as Tournament[])
}

TS:

tournaments: Tournament[] = [];

getTournaments() {
  this.service.getTournaments()
    .subscribe(data => {
      this.tournaments = data;
    })
}

Collectives™ on Stack Overflow

Json Parsing in Angular2

2 Answers 2

Comments

DEMO

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related