Can't get data from a function in a controller to ng-repeat

Question

I'm new in AngularJS. I'm trying to create the dynamic table in a view:

<table class="table">
    <thead>
        <tr>
            <td>Name</td>
            <td>Genre</td>
            <td>Duration</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="album in getAlbumsInfo(artists)">
            <td>{{ album.name }}</td>
            <td>{{ album.genre }}</td>
            <td>{{ album.duration }}</td>
        </tr>
    </tbody>
</table>

Here is my controller (artists received from the backend):

$scope.getAlbumsInfo = function (artists) {

    var albumsData = [];

    artists.forEach(function (artist) {

        var albumItemMap = new Map();

        albumItemMap.set("name", artist.name);
        albumItemMap.set("genre", artist.genre);
        albumItemMap.set("duration", artist.geduration);
        albumsData.push(albumItemMap);
    });

    return albumsData;
};

But it doesn't show any data in the table. Just simple table. I've checked if I use the hard-code data from the $scope something like:

$scope.albums = [
    { name: 'Cali Roll', genre: 'Pop', duration: 45 },
    { name: 'Philly', genre: 'Rock', duration: 50 },
    { name: 'Rainbow', genre: 'Relax', duration: 55 }
];

and (part of view):

<tr ng-repeat="album in albums">

It works fine. But, in the case with the function getAlbumsInfo it doesn't work. What am I doing wrong?

UPD: I need only one function, it's mandatory condition.

You haven't used `artists` in controller function. Why do you want that parameter? — Ankit Agarwal, Jan 09 '17 at 16:21
Why are you calling `getAlbumsInfo(artists)` in ng-repeat ? what is `artists` object ? — Supradeep, Jan 09 '17 at 16:21
Why you want use function in `ng-repeat`, You can call function in controller and use object here, Check out this: http://stackoverflow.com/questions/12336897/how-to-loop-through-items-returned-by-a-function-with-ng-repeat — Avnesh Shakya, Jan 09 '17 at 16:29

score 0 · Answer 1 · answered Jan 09 '17 at 16:29

You can do

<table class="table">
    <thead>
        <tr>
            <td>Name</td>
            <td>Genre</td>
            <td>Duration</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="album in getAlbumsInfo()">
            <td>{{ album.name }}</td>
            <td>{{ album.genre }}</td>
            <td>{{ album.duration }}</td>
        </tr>
    </tbody>
</table>

Controller

 $scope.getAlbumsInfo = function () {
  //call API and get artists and in success function add the code
      return API.getArtists().then(successfn);

    };

function successfn(response){
  albumsData = [];
  var artist = response.data;

        artists.forEach(function (artist) {

            var albumItemMap = new Map();

            albumItemMap.set("name", artist.name);
            albumItemMap.set("genre", artist.genre);
            albumItemMap.set("duration", artist.geduration);
            albumsData.push(albumItemMap);
        });

return albumsData;

}

score 0 · Answer 2 · answered Jan 10 '17 at 08:56

Instead of calling getAlbumsInfo from the ng-repeat each time, generate the albums array in your controller and then repeat it in the view. Call the getAlbumsInfo function with the artists object when you get it from backend as shown below :

$scope.albums = $scope.getAlbumsInfo(artists);

Now as we have albums array, repeat it in your html :

<tr ng-repeat="album in albums">
        <td>{{ album.name }}</td>
        <td>{{ album.genre }}</td>
        <td>{{ album.duration }}</td>
 </tr>

Can't get data from a function in a controller to ng-repeat

2 Answers2