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.

Answer 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.

Answer 2

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

Answer 3

提供的解决方案是正确的，如果如上所述，您仍然有相同的注释，则应手动检查用户表中的内容