CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-resource
Marco Carvalho
Marco Carvalho

Reputation: 49

How to call some $scope.function for each item in ng-repeat?

I have a form that needs an user string from input to be submitted. When submitted, an scope value is created through an service, using the input value as parameter. This scope value is used to fill the rest of my view.

Everything is great, except that I need, for each item of this scope value, the return of some function. I'm trying to just calling it on the view, but I get an infinite loop.

Don't know how to proceed here. Can you guys help me, please?

view.pug 

form(ng-submit='userGetTopTracksReq(user)')
    .form-group
        label(for='user') User:
        input#user.form-control(ng-model='user' placeholder='user')
    .form-group
        button.btn.btn-success.btn-block(type='submit') Request
hr
table.table.table-sm.table-hover(ng-show='userGetTopTracksRes.toptracks')
    thead
        tr
            th Artist
            th Track
            th Playcount
            th Total Playcount
    tbody
        tr(ng-repeat='track in userGetTopTracksRes.toptracks.track')
            td {{track.artist.name}}
            td {{track.name}}
            td {{track.playcount}}
            td {{trackGetInfoReq(track.artist.name, track.name).track.playcount}}

controller.js 

angular.module('app')
    .controller('userGetTopTracksController', function(lastFmService, $scope, $rootScope) {
        $scope.userGetTopTracksReq = (user) => {
            $scope.userGetTopTracksRes = lastFmService.get({
                api_key: $rootScope.api_key,
                method: 'user.getTopTracks',
                user: user,
                format: 'json',
                limit: 400
            });
        };

        $scope.trackGetInfoReq = (artist, track) => {
            return lastFmService.get({
                api_key: $rootScope.api_key,
                method: 'track.getInfo',
                artist: artist,
                track: track,
                format: 'json'
            });
        };
    });

services.js 

angular.module('app')
    .factory('lastFmService', function($resource) {
        return $resource('http://ws.audioscrobbler.com/2.0/', {});
    });

Upvotes: 0

Views: 163

Answers (2)

gitfudge
gitfudge

Reputation: 530

Why don't you just return the value you want displayed instead of returning everything?

$scope.trackGetInfoReq = (artist, track) => {
    let data = lastFmService.get({
        api_key: $rootScope.api_key,
        method: 'track.getInfo',
        artist: artist,
        track: track,
        format: 'json'
    });
    return data.track.playcount;
};

Upvotes: 0

Wayne Jetski
Wayne Jetski

Reputation: 26

In your template, you want to invoke the function. So you need to call the function first before accessing members on its return value. In your ng repeat for example: track in userGetTopTracksRes().toptracks.track.

Upvotes: 0

Related Questions