AngularJS http.get() accessing json breaks controller

Question

I'm new to AngularJS and have been trying to parse a json using the $http method. I made a test $scope.test = "working"; variable, which works fine. After putting in my $http method code it stops working and the $http method isn't working either. Here is my json:

{
   "programmes":[
      {
         "@attributes":{
            "id":"1"
         },
         "name":"Arrow",
         "imagepath":"..\/img\/arrow.jpg"
      },
      {
         "@attributes":{
            "id":"2"
         },
         "name":"Fargo",
         "imagepath":"..\/img\/fargo.jpg"
      },
      {
         "@attributes":{
            "id":"3"
         },
         "name":"You, me and the Apocalypse",
         "imagepath":"..\/img\/youme.jpg"
      },
      {
         "@attributes":{
            "id":"4"
         },
         "name":"Heat",
         "imagepath":"..\/img\/heat.jpg"
      },
      {
         "@attributes":{
            "id":"5"
         },
         "name":"The Thick of It",
         "imagepath":"..\/img\/thick.jpg"
      }
   ]
}

and here is my controller file:

app.controller('MainController', ['$scope', function($scope) {
    $scope.test = "works";

    $http.get("../../jsons/programmes.json").success(function(response) {$scope.programmes = response.programmes;});

}]);

and finally, my html:

<ul>
  <li ng-repeat="x in programmes">
    {{ x.name }}
  </li>
</ul>

<p>{{test}}</p>

so with the $http.get() in the controller, {{test}} shows up literally, but when I remove it, it shows 'works'. The ng-repeat ul doesn't work at all. What am I doing wrong?

Komo · Accepted Answer · 2015-11-18 13:50:09Z

5

You need to inject the $http angular service in your controller. You can take a look at your browser console. Generally it gives you a hint on what you missed.

app.controller('MainController', ['$scope', '$http', function ($scope, $http) {

You're seeing the angular expression {{test}} because your missing dependency breaks your controller code.

edited Nov 18, 2015 at 13:50

answered Nov 18, 2015 at 13:41

Komo

2,1381 gold badge23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS http.get() accessing json breaks controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related