Unexpected token H in JSON at position 0

SyntaxError: Unexpected token H in JSON at position 0
at JSON.parse ()
at Response.Body.json (http://localhost:8100/build/vendor.js:66977:25)
at MapSubscriber.project (http://localhost:8100/build/main.js:81:56)
at MapSubscriber._next (http://localhost:8100/build/vendor.js:114082:35)
at MapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:33093:18)
at XMLHttpRequest.onLoad (http://localhost:8100/build/vendor.js:67470:38)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4973:33)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
Ionic Framework: 3.9.2

this my code :

getGames() {

return this.http.get('/games/?fields=*&limit=10', this.options)
.map(response => response.json());

}

i don’t why this can be. i don’t change my backend code. Only change html code before i change my front end code my back end code passed as well. can you give me a solution?

Try to console.log(Response) to Check the Server Response.

i can’t understand
can you give me a sample how to use console.log(Response)?

return this.http.get('/games/?fields=*&limit=10', this.options)
.map((response) => {
console.log(response);
});

i got nothing
but if i added : response.json();
like this
return this.http.get(’/characters/?fields=*&limit=10’, this.options)
.map((response) => {
response.json();
console.log(response);
});

i got :

Of course you got something.

Your server send “Hello World” as _body back. So the first char of your body is H and it is not valid json :slight_smile:

Take a close look at you first screenshot…

If this response is ok then use response.text() instead of response.json().

1 Like

i want to get data in igdb.api website , with back end proxy
this my ionic.config.json file:

{
“name”: “iga”,
“app_id”: “671252b4”,
“type”: “ionic-angular”,
“integrations”: {
“cordova”: {}
},
“proxies”: [
{
“path”: “/*”,
“proxyUrl”: “https://api-2445582011268.apicast.io/”
}
]
}

this my provider data file :
import { Http, Headers, RequestOptions } from ‘@angular/http’;
import { Injectable } from ‘@angular/core’;
import ‘rxjs/add/operator/map’;
/*
Generated class for the DataProvider provider.

See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class DataProvider {

headers = new Headers({‘user-key’:‘d4ad98e66a843ee9e976d3dbe3aee155’ });
options = new RequestOptions({ headers : this.headers });

constructor(public http: Http) {
console.log(‘Hello DataProvider Provider’);
}
getGames() {

return this.http.get('/characters/?fields=*&limit=10', this.options)
.map((response) => { 
  response.json();
  console.log(response);
});

}
}

and i passed with this in my home.ts

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { DataProvider } from ‘…/…/providers/data/data’;

/**

@IonicPage()
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,
})
export class HomePage {

games = [];

constructor(public navCtrl: NavController, public navParams: NavParams, private _data: DataProvider) {

this._data.getGames()
.subscribe(res => {this.games = res});

}

ionViewDidLoad() {
console.log(‘ionViewDidLoad HomePage’);
}

}

this my file : if you can fixed i’m very thanksfully . i very tried to solved this problem

https://drive.google.com/file/d/1fLxBwh14uPuxwpaTNTuLwcDnYzETH_yB/view?usp=sharing

i don’t understand i very noob for angularJS. yesterday my coding is passed as well , but i change my front end code i got this error

and in ionic serve -l
i got this error in cmd
Without from option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to undefined to prevent this warning.

First change

games = [];

to

public games: Array<any> = [];

But as long your response.body is “Hello Word” you have a problem.
I no nothing about that api sorry.