Dev Faq
0
votes

Comment chercher et utiliser des données à partir d'un fichier JSON en Angular7

J'essaie d'extraire des données à partir d'un fichier JSON et d'afficher ces données dans le formulaire

lien de fichier JSON: https://raw.githubusercontent.com/datameet/railways/master/trains. JSON

J'essaie avec le code ci-dessous. Mais il renvoie après l'erreur dans FETCHDATA.COMPONENT.TS Fichier:

Propriété 'JSON' n'existe pas sur le type "objet".

fetchdata.component.ts xxx

fetchdata.component.html xxx

aide.

4 commentaires

Essayez console.log (res) ? Il renvoie probablement déjà le corps de réponse lui-même. Vous n'avez besoin que d'utiliser .json () si vous utilisez l'API de Fetch Native

Il donne maintenant une autre erreur: "Impossible de trouver le nom" res "."

Je vois .. je suppose que rien des réponses ci-dessous résout votre problème aussi?

Bonjour, @ Tony7931 Vérifiez la réponse de l'API. Vous pouvez obtenir l'objet en réponse et que cet objet passe dans * ngfor qui n'est pas valide et que vous pouvez également affecter directement res à ceci.items . Comme ceci.items = res

5 Réponses :

0
votes

Vous n'avez pas besoin d'appeler .json () Fonction au cas où vous feriez un this.http.get . Angulaire fait ça pour vous. Faites simplement ceci.items = res . Cela fera le tour.

upd: votre objet JSON n'est pas un tableau lui-même. Vous devez aussi bien mettre à jour votre modèle de la manière suivante: xxx

3 commentaires

Suggérez-vous de faire ceci: articles: tout; res: tout; constructeur (http privé: httpclient) {this.http.get (this._trainorl) .Subscribe (res => ceci.items = res); console.log (this.Res); }

Il suffit de changer ceci.items = res.json () à ceci.items = res dans le code que vous avez fourni. console.log (éléments) retournera non défini dans votre exemple, car http.get est une opération asynchrone.

Maintenant, je reçois cette erreur dans la console Chrome et il ne montre aucune donnée dans SELECT: Impossible de trouver un objet de support différent '[Objet d'objet]' de type 'objet'. Ngfor prend uniquement en charge la liaison à des itérables tels que des tableaux.

1
votes

Il y a une différence entre les http et httpClient et ils sont également exportés différemment.

  1. http -> est le module principal qui oblige l'utilisateur à appeler res.json () . Ceci était commun avant la version angulaire 4.0.

  2. httpclient -> est un nouveau module depuis la version 4.0. Il est par défaut la communication à JSON et vous n'avez donc pas besoin d'appeler res.json () explicitement.

    En bref, passe de res.json () à juste res corrigera le problème Pour vous.

    I.e ceci.items = res; devrait être bien.

    Également, comme une bonne pratique, utilisez la méthode Ngoninit de cycle de vie au lieu du constructeur pour effectuer des appels HTTP.

2 commentaires

Je reçois cette erreur dans la console Chrome et il ne montre aucune donnée dans SELECT: Impossible de trouver un objet de support différent '[objet d'objet]' de type 'objet'. Ngfor prend uniquement en charge la liaison à des itérables tels que des tableaux. J'ai écrit ceci: .subscribe (res => ceci.items = res); console.log (this.items);

C'est parce que le trains.json URL que vous appelez renvoie un objet JSON au lieu du tableau. Et vous essayez probablement de le théier dans votre modèle en utilisant ngfor . Vérifiez la propriété correcte et son type que vous attribuez au composant SELECT .

0
votes

Pourquoi faites-vous ceci.items = res.json () ? Pourquoi pas seulement ceci.items = res ? res doit déjà tenir l'objet JSON renvoyé de la demande d'obtention. Si c'est effectivement une chaîne, essayez ceci.items = json.parse (res) .

0 commentaires
0
votes

Pouvez-vous essayer: xxx

1 commentaires

Cela fonctionne mais en partie. Il montre les données JSON dans la console mais pas dans SELECT. Il donne cette erreur dans la console: impossible de trouver un objet de support différent '[objet d'objet]' de type 'objet'. Ngfor prend uniquement en charge la liaison à des itérables tels que des tableaux.

3
votes

La réponse n'est probablement pas ce que vous pensez. Je vous suggère de consoler.log () la réponse de votre requête pour voir ce qu'elle ressemble en fait: xxx pré>

Vous verrez que vous obtenez une chose comme celle-ci dans votre console: P > 

 constructor(private http:HttpClient) {
      this.http.get( this._trainUrl)
        .subscribe(res => {
          this.items = res["features"]; 
        });
    }

1 commentaires

Merci. Cela fonctionne et merci pour la suggestion, je vais regarder la bibliothèque RxJS.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule
[ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail