Fetching data from json file via service is giving "unexpected end of input" in Angular4

Question

I am trying to get data from a json file located in assets folder. But instead getting error.

heroes.service.ts

getPeopleData(): Observable<people[]>{
  return this.http.get<people[]>('assets/data/someData.json');
}

people.interface.ts

export interface people{
    id: number,
    name: string,
    age: number
}

someData.json:

[
    {"id":1, "name": "Jack", "age": 21},
    {"id":2, "name": "Rina", "age": 29},
    {"id":3, "name": "Jonathan", "age": 42}
]

about.component.ts

  peopleData:any;

  ngOnInit() {
    this.getPeople();
  }

  getPeople(): void {
   this.heroesService.getPeopleData()
    .subscribe(data => this.peopleData = data)
  }

Error:

Can someone help me out, where is the problem? There are no errors in console instead.

can you console.log data and send us the output? You may not be getting valid JSON back in your request — Farasi78, Sep 17 '18 at 13:52
Possible duplicate https://stackoverflow.com/questions/50924901/angular-6-load-json-from-local/50925032 — CornelC, Sep 17 '18 at 13:55
I have checked with your code it's working fine. might be your json file having an issue. if you upload your code sample any one can help — Indrakumara, Sep 17 '18 at 14:09

score 1 · Accepted Answer · answered Sep 17 '18 at 14:04

This is working for me:

Service:

public testJson(): Observable<people[]>{
        return this.http.get("https://api.myjson.com/bins/1f5zag").map(res => res.json());
    }

(You can actually try it with that url)

component.onInit

this.yourService.testJson()
    .subscribe( evt => {
      const ppl:people[] = evt;
      console.log(ppl);
    });

Fetching data from json file via service is giving "unexpected end of input" in Angular4

1 Answers1