Json Parsing in Angular2 - arrays

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?

Answer 1

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

Answer 2

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;
})
}
DEMO