Чтение data.json с HttpClient на Stackblitz?

Question

У меня есть крошечная демонстрация , и она пытается прочитать app/data.json с помощью Angular HttpClient.

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

Однако ответ HttpClient говорит:

Сбой при разборе ...

Мысли

Answer 1

я думаю, что есть некоторые проблемы о чтении локального json в stackblitz, вместо этого он возвращает просто 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));
}

раздвоенный ДЕМО

Answer 2

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')

Разветвленный стек-блиц

Answer 3

В настоящее время вы не можете получить JSON напрямую через HTTP, но вместо этого вы можете импортировать его

data.json

возвращает ресурс index.html вместо данных, которые вы ожидали

---

онлайн пример

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

export class AppComponent  {
  constructor(http:HttpClient) {

  }

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