3
votes

Lire data.json avec HttpClient sur Stackblitz?

J'ai une petite démo et il tente de lire app / data.json en utilisant Angular HttpClient.

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

Cependant, la réponse de HttpClient dit:

Échec lors de l'analyse ...

Réflexions?

javascript typescript angular stackblitz

0 commentaires

3 Réponses :

2
votes

Actuellement, vous ne pouvez pas obtenir le JSON directement via HTTP, mais vous pouvez l'importer à la place

data.json

il renvoie la ressource index.html à la place des données attendues

exemple en ligne

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

export class AppComponent  {
  constructor(http:HttpClient) {

  }

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

0 commentaires

1
votes

Je pense qu'il y a des problèmes concernant la lecture de json local dans stackblitz, ce n'est pas le cas. t retourne plain json juste le index.html à la place. mais une autre façon est de se moquer d'une requête du json local, vous pouvez essayer:

import data from './data.json'

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

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

forké DEMO

0 commentaires

8
votes

Stackblitz ne diffuse actuellement pas de fichiers statiques, sauf dans le cas où ils se trouvent dans le dossier assets .

Vous avez donc deux options ici:

1) Importer directement json en tant que module

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

Pour plus de détails Voir d'autres réponses

2) Déplacez ce fichier json dans le dossier assets ( Remarque : vous devez recharger stackblitz pour le faire fonctionner):

import data from './data.json';

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

Stackblitz fourchu

0 commentaires