I have a tiny demo and it attempts to read app/data.json using the Angular HttpClient.

const post$:Observable<Post> = <Observable<Post>> http.get('./data.json');

However the HttpClient reponse says:

Failure during parsing ...

Thoughts?

I have a tiny demo and it attempts to read app/data.json using the Angular HttpClient.

const post$:Observable<Post> = <Observable<Post>> http.get('./data.json');

However the HttpClient reponse says:

Failure during parsing ...

Thoughts?

• javascript
• angular
• typescript
• stackblitz

3 Answers 3

Stackblitz currently doesn't serve static files except the case when they are in assets folder.

So you have two options here:

1) Import json directly as module

import data from './data.json';

console.log(data) // => {title: "Simulating HTTP Requsts", content: "This is off the hook!!"}

For more details See other answers

2) Move that json in assets folder(Note: you have to reload stackblitz to make it working):

http.get('/assets/data.json')

Forked Stackblitz

Currently, you can't get the JSON directly over HTTP, but you can import it instead

data.json

it returns resource of index.html instead of the data you expected

online example

import { of } from 'rxjs';
import data from './data.json';

export class AppComponent  {
  constructor(http:HttpClient) {

  }

  ngOnInit(){
    const post$ = of(data);
    post$.subscribe(console.log);
  }
}

i think there are some issues about reading local json in stackblitz it doesn't return plain json just the index.html instead. but another way is mocking a request from local json, you can try:

import data from './data.json'

ngOnInit(){
  this.getDatas().subscribe(data=>{
    console.log(data)
  })
}

getDatas():Observable<any>{
  return of(data).pipe(delay(1000));
}

forked DEMO