Ionic Json nested - json

Question

I'm new in Ionic development. I'm having a problem retrieving JSON.
"Failed to load https://api.wh.geniussports.com/v1/basketball/competitions/19816/matcheslive?ak=eebd8ae256142ac3fd24bd2003d28782: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access."
Here's my json format
{
"response": {
"meta": {
"version": 1,
"code": 200,
"status": "success",
"request": "http://api.wh.geniussports.com/v1/basketball/competitions/19816/matcheslive?ak=eebd8ae256142ac3fd24bd2003d28782",
"time": 1528177532,
"count": 10,
"limit": 10
},
"data": [
{
"leagueId": 6,
"matchId": 784470,
"competitionId": 19816,
"venueId": 17386,
"poolNumber": 0,
"roundNumber": "1",
"roundDescription": "",
"matchNumber": 1,
"matchStatus": "COMPLETE",
"matchName": "",
"phaseName": "",
"extraPeriodsUsed": 0,
"matchTime": "2017-11-17 19:30:00",
"matchTimeUTC": "2017-11-17 11:30:00",
"enddate": null,
"timeActual": "2017-11-17 19:45:37",
"timeEndActual": "2017-11-17 21:12:10",
"durationActual": 87,
"temperature": 0,
"attendance": 0,
"duration": 120,
"weather": "",
"twitterHashtag": "",
"liveStream": 1,
"matchType": "REGULAR",
"keywords": "",
"ticketURL": "",
"externalId": "920",
"nextMatchId": 0,
"placeIfWon": 0,
"placeIfLost": 0,
"updated": "2017-11-24 11:04:00",
"linkDetail": "/v1/basketball/matches/784470",
"linkDetailLeague": "/v1/basketball/leagues/6",
"venue": {
"venueId": 17386,
"venueName": "Nanhai Gymnasium",
"venueNameInternational": "",
"venueNickname": "Nanhai Gym",
"venueNicknameInternational": "",
"surfaceName": "",
"locationName": "",
"website": "",
"ticketURL": "",
"externalId": "54",
"linkDetailVenue": "/v1/basketball/venues/17386"
},
"leagueName": "ASEAN Basketball League",
"leagueNameInternational": "",
"competitionName": "2017 ASEAN Basketball League",
"competitionNameInternational": "",
"gsId": "",
"competitors": [
{
"competitorType": "TEAM",
"competitorName": "Singapore Slingers",
"competitorId": 88261,
"linkDetailCompetitor": "/v1/basketball/teams/88261",
"scoreString": "59",
"scoreSecondaryString": "",
"completionStatus": "COMPLETE",
"resultPlacing": 0,
"isDrawn": 0,
"isHomeCompetitor": 0,
"teamId": 88261,
"teamName": "Singapore Slingers",
"teamGsId": null,
"teamNameInternational": "",
"teamNickname": "Singapore Slingers",
"teamNicknameInternational": "",
"teamCode": "",
"teamCodeInternational": "",
"website": "",
"internationalReference": "",
"externalId": "74",
"images": {
"logo": {
"L1": {
"size": "L1",
"height": 600,
"width": 600,
"bytes": 45196,
"url": "http://img.wh.sportingpulseinternational.com/5b71cf0a1af51c8376eda43e6ba5bc22L1.jpg"
},
"M1": {
"size": "M1",
"height": 400,
"width": 400,
"bytes": 25005,
"url": "http://img.wh.sportingpulseinternational.com/5b71cf0a1af51c8376eda43e6ba5bc22M1.jpg"
},
"S1": {
"size": "S1",
"height": 200,
"width": 200,
"bytes": 9180,
"url": "http://img.wh.sportingpulseinternational.com/5b71cf0a1af51c8376eda43e6ba5bc22S1.jpg"
},
"T1": {
"size": "T1",
"height": 75,
"width": 75,
"bytes": 2270,
"url": "http://img.wh.sportingpulseinternational.com/5b71cf0a1af51c8376eda43e6ba5bc22T1.jpg"
}
}
},
"clubId": 62,
"clubGsId": null,
"clubName": "Singapore Slingers",
"clubNameInternational": "",
"linkDetailClub": "/v1/basketball/clubs/62"
},
Below is my loadUser function
loadUser(){
this.http.get('http://api.wh.geniussports.com/v1/basketball/competitions/19816/matcheslive?ak=eebd8ae256142ac3fd24bd2003d28782')
.map(res => res.json())
.subscribe(res => {
this.data = data.results;
console.log(data.results);
}, err => {
console.log(err);
});
}
My main goal is to log the data[] array. Please help me

Answer 1

This is the problem with browser, typically its a security concern not to allow other requests which may lead to XSS attack easily. If only for development I suggest you to install a plugin which will disable in your browser plugin
If for production, then you need to configure your API then do this .