Forum : AngularJS - Afficher de la data récupéré depuis un JSON

Bonjour à tous

Je débute en MEAN et je suis entrain de construire une app pour m'entrainer. Cependant je rencontre un problème lorsque je souhaite récupérer les données que le serveur me renvoi en JSON dans mon côté client avec AngularJS

J'ai réussi à créer une API qui, lorsqu'on request GET sur une URL, me renvoi un tableau JSON avec les données.

Je cherche maintenant, côté client à récupérer ces données et à les afficher avec un NG-REPEAT.
Voici mon code dans mon fichier app.js:

var app = angular.module('topshelf', []); app.controller('MainCtrl', [ '$scope', function($scope , $http){ $http.get("localhost:8080/inventory").then(function(res){ $scope.mydata = res.data; }); }]);

et voici le code dans index.html:

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TopShelf</title> <link href="css/style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> <script src="/js/app.js"></script> </head> <body ng-app ="topshelf" ng-controller="MainCtrl" class="top-navigation"> <ul> <li ng-repeat="ingredients in mydata"> {{ingredients.name}} </li> </ul> </body>

J'ai essayé d'utiliser {{ingredients.name}} {{ingredients.quantity}} ou même {{ingredients}} tout court mais le résultat est le même, il n'affiche rien.
Dans la console du navigateur, j'ai l'erreur "Cannot read property get from undefined", dans le app.js . Comme si il ne reconnaissait pas le $http (pourtant passé en parametre)

J'aimerais simplement pouvoir récupérer la data JSON et pouvoir la mettre en forme avec AngularJS.

Est-ce que quelqu'un pourrait m'aider?

Merci à tous

AngularJS - Afficher de la data récupéré depuis un JSON

2 réponses