CODEWITHSUNDEEP
jsonangularjs
leesider
leesider

Reputation: 109

JSON not displaying in page

I have a html page with that is to call JSON data from a js file. The html is below:

<html>
<head>
    <meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>

</script>
<title>
</title>

</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">

    <ul data-ng-repeat="album in albums">
    <li>
      {{albums.title}}
    </li>
  </ul>  

</div>

</body>
</html>

The "app.js" file that it calls is below:

**

var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
    getAlbums: function(){
        alert("test");
        return [{"artist": "Kid 606","title:":"Happiness"}];
        },
    };
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});

** There are nor errors in the console when I run it, just nothing appears. The alert box "test" appears when I load the page so the function is getting called, it just doesn't display the JSON. Thank you for any replies.

Upvotes: 0

Views: 63

Answers (2)

leesider
leesider

Reputation: 109

It is OK now, thank you very much.

HTML is

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>

</script>
<title>
</title>

</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">

    <ul data-ng-repeat="album in albums">
    <li>
      Artist is "{{album.artist}} " and title is {{album.title}}

    </li>
  </ul>  

</div>

</body>
</html>

JS is 

var albumsApp = angular.module ('albumsApp',[])

albumsApp.factory('albumFactory',function() {
return {
    getAlbums: function(){

        return [{"artist": "Kid 606","title":"Happiness"}];
        },
    };
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});

Upvotes: 0

Jax
Jax

Reputation: 1843

change this:

{{albums.title}}

to 

{{album.title}}

Upvotes: 1

Related Questions