angular.extend doesnt work in Angularjs app to merge 2 arrays

Question

I wanna merge two arrays but the result always is null. I dont know whats the problem here is my code :

$scope.messages=[];
$scope.messagesRecieved=[];
$scope.messagesSent=[];
Message.getMessengerMessages(localStorage.getItem("token"),localStorage.getItem("contact")).then(function(messages){


 $scope.messagesRecieved=messages;

})
console.log('le contact est '+localStorage.getItem("contact") +'Lutilisateur est  '+localStorage.getItem("token"))
Message.getMessengerMessages(localStorage.getItem("contact"),localStorage.getItem("token")).then(function(messages){


 $scope.messagesSent=messages;
 for (var i=0; i<messages.length; i++) {
  if(messages[i].read=='no'){
    Message.modifyRead(messages[i]._id);
  }
 }
})
angular.extend( $scope.messages, $scope.messagesRecieved, $scope.messagesSent);

Message is a service.

The `Message` API is asynchronous. Push the data to `$scope.messages` array from *inside* each `.then` block. — georgeawg, Dec 06 '16 at 02:49
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — georgeawg, Dec 06 '16 at 02:53

musically_ut · Answer 1 · 2016-12-05T23:22:48.763

0

angular.extend is used to merge objects, not arrays. You probably want to use Array.concat here.

$scope.messages = $scope.messages
                        .concat($scope.messagesRecieved)
                        .concat($scope.messagesSent);

edited Dec 05 '16 at 23:22

answered Dec 05 '16 at 23:09

musically_ut

34,028
8
94
106

@julianaMorales That is not enough information for me to work with. Could you elaborate on _how_ it failed? – musically_ut Dec 05 '16 at 23:23
when i display $scope.messages on the view its empty – juliana Morales Dec 05 '16 at 23:32

Roamer-1888 · Accepted Answer · 2016-12-06T03:48:01.120

I'm guessing you only use $scope.messagesRecieved and $scope.messagesSent as intermediates, for deriving $scope.messages, not for driving the view.

If so, they can disappear and messagesRecieved/messagesSent can be delivered down a promise chain starting with Promise.all() to aggregate your two Message.getMessengerMessages() promises.

Also, to concatenate arrays, use newArray = array1.concat(array2).

// $scope.messagesRecieved = []; // not necessary unless there's a corresponding view element
// $scope.messagesSent = []; // not necessary unless there's a corresponding view element
$scope.messagesSent = []; // you only need to do this if you want to nullify a view element while the two async gets are underway.

var receivedPromise = Message.getMessengerMessages(localStorage.getItem('token'), localStorage.getItem('contact'));

var sentPromise = Message.getMessengerMessages(localStorage.getItem('contact'), localStorage.getItem('token')).then(function(messages) {
    for(var i=0; i<messages.length; i++) {
        if(messages[i].read == 'no') {
            Message.modifyRead(messages[i]._id); // if Message.modifyRead() is async, this code block is a bit different
        }
    }
});

Promise.all(receivedPromise, sentPromise).then(function(messagesRecieved, messagesSent) {
    $scope.messages = messagesRecieved.concat(messagesSent);
});

angular.extend doesnt work in Angularjs app to merge 2 arrays

2 Answers2