JSON not displaying in page

Question

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.

Replace albums.title by album.title. And remove the trailing ':' from the "title:" key in the json — JB Nizet
– JB Nizet, Commented Jun 8, 2015 at 11:07

Jax · Accepted Answer · 2015-06-08 11:06:09Z

1

change this:

{{albums.title}}

to

{{album.title}}

answered Jun 8, 2015 at 11:06

Jax

1,8373 gold badges18 silver badges30 bronze badges

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

Comments

leesider · Accepted Answer · 2015-06-08 11:18:09Z

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();
});

Collectives™ on Stack Overflow

JSON not displaying in page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related