在 Stackblitz 上使用 HttpClient 阅读 data.json？

Question

I have a tiny demo 并尝试使用 Angular HttpClient 读取 app/data.json。

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

但是 HttpClient 回复说：

Failure during parsing ...

想法？

Answer 1

目前，您无法通过 HTTP 直接获取 JSON，但您可以改为导入它

data.json

它是 index.html 的 returns 资源，而不是您期望的

数据

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 2

我认为有一些 issues 关于在 stackblitz 中阅读本地 json 它不是 return 普通 json 而是 index.html。但另一种方法是模拟来自本地 json 的请求，你可以尝试：

import data from './data.json'

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

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

分叉 DEMO

Answer 3

Stackblitz 目前不提供静态文件，除非它们位于 assets 文件夹中。

所以你有两个选择：

1) 直接导入 json 作为模块

import data from './data.json';

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

更多详情见其他答案

2) 将 json 移动到资产文件夹中（注意：您必须重新加载 stackblitz 到让它工作):

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

Forked Stackblitz

在 Stackblitz 上使用 HttpClient 阅读 data.json？

Reading data.json with HttpClient on Stackblitz?

javascript

typescript

angular

stackblitz