Recently I've been diving into the world of AngularJS, and I encountered an issue while trying to parse a json file using the $http method. Initially, when testing a simple variable like $scope.test = "working";, everything seemed to be functioning correctly. However, as soon as I integrated the $http method into my code, both the variable and the data retrieval stopped working. Here is a snippet of the json content:
{
"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"
}
]
}
Additionally, here is a portion of the controller file in question:
app.controller('MainController', ['$scope', function($scope) {
$scope.test = "works";
$http.get("../../jsons/programmes.json").success(function(response) {$scope.programmes = response.programmes;});
}]);
Lastly, this is how the html section looks like:
<ul>
<li ng-repeat="x in programmes">
{{ x.name }}
</li>
</ul>
<p>{{test}}</p>
Upon adding the $http.get() call in the controller, the text displayed by {{test}} appears exactly as written, instead of the expected value. Furthermore, the ng-repeat directive within the ul element fails to work altogether. Any ideas on what I might be doing incorrectly?