Angular http get call failling [duplicate]

Question

Please find the below url.

https://stackblitz.com/edit/angular-w4lj6q?file=app%2Fapp.component.ts

I am using http module and trying to get the data from json file but i am getting below error. can you please help somebody to fix the issue.

Error : errors.js:55 ERROR SyntaxError: Unexpected token < in JSON at position 0

GSSwain · Accepted Answer · 2018-03-17 12:24:32Z

1

There are couple of things going wrong in the stackblitz.

The folder which contains the JSON is apiDta instead of apiData
Stackblitz is not returning the JSON even with the correct URL, rather responds with a HTML.

You can use reqres to get a sample JSON. Update the URL in NameListService

private _url: string = "https://reqres.in/api/users";

and update AppComponent's ngOnInit()

this._nameService
    .getNames()
    .subscribe(res => { 
                          this.nameLists = res;
                          console.log(JSON.stringify(this.nameLists));
                      });

answered Mar 17, 2018 at 12:24

GSSwain

6,2032 gold badges23 silver badges28 bronze badges

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

1 Comment

Mike Tung Over a year ago

I can confirm, this works. Also nice find with reqres :)

Khaled Ahmed · Accepted Answer · 2018-03-17 11:19:38Z

0

because you should add the content-type equal to json in the http header to make sure that the returned data format is json not HTML as your code do

answered Mar 17, 2018 at 11:19

Khaled Ahmed

1,14410 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular http get call failling [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related