Reading data.json with HttpClient on Stackblitz?

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?

Answers:

Answer

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

Answer

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

enter image description here


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);
  }
}
Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.