Angular callback array push issue

Question

I am trying to create a comments section, similar to that of instagram whereby a list of comments is displayed, along side a user profile and usename for each comment.

I have a comments table in parse and a user table in parse, and so I have to perform a further query for each comment to get the profile picture link and username.

I am using angular to do this. I have a comments array to store all the commments, and I am pushing an object onto this array containing: - Username - profile picture - comment

var commentQuery = parseQuery.new('Comment');
commentQuery.equalTo("ID", id);
parseQuery.find(commentQuery)
.then(function(results) {
    for(var i =0; i < results.length; i++){
        var comment = results[i].get('comment');
        var userQuery = parseQuery.new('_User');
        userQuery.equalTo("objectId", results[i].get('userObject')[0].id);
        parseQuery.find(userQuery)
        .then(function(user) {  
            var commentObject = {
               comment: comment,
               username : '',
               profile: ''
        }
            commentObject['profile'] = user[0].get('profile_picture')['_url'];
            commentObject['username'] = user[0].get('liveUsername');
            $scope.comments.push(commentObject);    
        })
    }   
})

What this then produces in my ng-repeat is a list, with the correct number of comments, however all the comments are the same!

If i print out the comments to the console as they are downlaoded, they are correct. It is at the object creation where things go wrong, and the same data is placed within all comment objects.

Change $scope.commentObject to var commentObject

Rambler
– Rambler

2016-06-08 09:23:33 +00:00
Commented Jun 8, 2016 at 9:23 — Rambler
– Rambler, Commented Jun 8, 2016 at 9:23

E. Abrakov · Accepted Answer · 2016-06-08 09:21:42Z

1

$scope.comments contains multiply $scope.commentObject, so when You change $scope.commentObject it changes in whole array. You can create new var in .then(function(user) { callback and push it to array.

answered Jun 8, 2016 at 9:21

E. Abrakov

4632 silver badges6 bronze badges

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

Comments

Rambler · Accepted Answer · 2016-06-08 10:30:34Z

0

@OP The thing is $scope.commentObject is a reference , so when you update this object all its references are updated to the same value . Consider this example :

var list=[];
$scope.obj="a";
list.push($scope.obj);
console.log(list);  //it will print ['a']
$scope.obj="b";
console.log(list);  //it will print ['b'] , even though  we haven't pushed any new value in the list.

You see the problem is that you are pushing the same reference again and again. To resolve it change your code to the following :

parseQuery.find(userQuery)
    .then(function(user) {  
        var commentObject = {
           comment: comment,
           username : '',
           profile: ''
    }
        commentObject['profile'] = user[0].get('profile_picture')['_url'];
        commentObject['username'] = user[0].get('liveUsername');
        $scope.comments.push(commentObject); 
    })

answered Jun 8, 2016 at 10:30

Rambler

5,5702 gold badges24 silver badges29 bronze badges

1 Comment

user3024827 Over a year ago

indeed this did fix the issue of duplicated items, however after chnaging as suggested, I now have the same comment repeated under each username. i.e each list item displays the user name and then exactly the same comment. This is something to do with the fact the comment is outside of the inner callback?

Karim · Accepted Answer · 2016-06-08 12:32:30Z

0

The solutions provided are correct, if as stated above, you still have the same comment you should check manually what it's inside the user table

answered Jun 8, 2016 at 12:32

Karim

8,6823 gold badges27 silver badges36 bronze badges

Collectives™ on Stack Overflow

Angular callback array push issue

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related