最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Reading data.json with HttpClient on Stackblitz? - Stack Overflow

programmeradmin2浏览0评论

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?

Share Improve this question asked Jan 5, 2019 at 7:30 OleOle 47.3k70 gold badges237 silver badges443 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 8

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

发布评论

评论列表(0)

  1. 暂无评论