.push not working for angularjs and pubnub - angularjs

Question

I am working on pubnub chat. And trying to push new message to the array of messages.
I have an array of message objects like
Object {0: Object, 1: Object, 2: Object, 3: Object, 4: Object, 5: Object, 6: Object, 7: Object, 8: Object, 9: Object, 10: Object, 11: Object, 12: Object, 13: Object, 14: Object, 15: Object, 16: Object, 17: Object, 18: Object, 19: Object}
Each object contains data like
Object {content: "asd", date: "2016-08-29T05:10:41.208Z", sender_username: "siehyvar", sender_uuid: "1294553"}
now I am trying to push another object
Object {content: "hi", sender_uuid: "1294553", sender_username: "siehyvar", date: "2016-08-29T05:47:40.232Z"}
with the following code
$scope.messages: [];
scope.$on(API.getMessageEventNameFor(), function(ngEvent, m) {
scope.$apply(function() {
$scope.messages.push(m);
});
});
And the error I am getting is
messages.push is not a function
I suppose messages here is an array of objects but the .push function is not working. Can somebody please help?
Let me explain the code. So I have one chat Api where I am putting all pubnub code, two controllers(for online users and chat) and two twig templates(for online users and chat)
Messages declaration for current channel ChatApi :
current_channel: {
channel_name: null,
channel_label: null,
messages: []
},
Join chat event from chatApi
joinChat: function (chat_channel,scope) {
var channel = chat_channel.channel;
var channel_name = chat_channel.name;
//Join chatroom Channel with the room name
API.chatrooms.addMe(channel);
//Get online users in chatroom
API.chatrooms.onlineMembers(channel, scope);
//API.current_channel.channel_id = channel;
API.current_channel.channel_name = channel;
API.current_channel.channel_label = channel_name;
console.log(API.current_channel.channel_name);
API.getPresenceEventNameFor();
// Listening to the callbacks for getting messages for current channel
scope.$on(API.getMessageEventNameFor(), function(ngEvent, m) {
scope.$apply(function() {
if (angular.isArray(scope.current_channel.messages)) {
scope.current_channel.messages.push(m);
}else {
console.log("Not is array");
}
});
scroller.down(500);
});
API.getHistory(channel, scope);
Twig for joining chat with user
<ul class="all-chats-list" ng-repeat="onlineUser in online.users">
<li class="col-xs-12 nopadding" ng-click="joinChat(onlineUser.chat_channel); selectMe($event);">
and messages are being displayed as
<li ng-repeat="message in current_channel.messages">
Controller for joining chat
$scope.joinChat = function(chat_channel) {
chatApi.joinChat(chat_channel, $scope);
};
Now when I am calling send message as
Twig:
<form ng-submit="sendMessage()">
<div class="col-xs-9 col-md-10 form-group nopadding">
<input style="width: 100%" ng-model="message.content" class="form-control" type="text" placeholder="Type your message" />
</div>
<div class="col-xs-3 col-md-2 form-group nopadding">
<button type="submit" class="form-control btn site-btn" id="send-message">Send</button>
</div>
</form>
chatApi:
sendMessage: function() {
console.log('PUBLISH TO: ' + API.current_channel.channel_name);
// Don't send an empty message
if (!API.message.content ||
API.message.content === '') {
return;
}
Pubnub.publish({
channel: API.current_channel.channel_name,
message: {
content: API.message.content,
sender_uuid: models.user.uuid,
sender_username: models.user.username,
date: new Date()
},
callback: function(m) {
//console.log(m)
}
});
// Reset the messageContent input
API.message.content = '';
},
Chat controller:
$scope.sendMessage = chatApi.sendMessage;
I am getting the error messages.push is not a function.
I guess it is because it is treating it as an object and not an array.
Hope it is clear now.

Answer 1

Adding to what others have mentioned,
The obvious issue is here:
$scope.messages: [];
am getting the error messages.push is not a function.
Just replace the declaration of $scope.messages with:
$scope.messages = [];
Now you will be able to call push method on $scope.messages array.
In your example $scope.messages was of type object (it should've been of type array).
You can read more about what methods are available to array and object types in javascript here.
The reason why you can't call push on an object an JS is
In case you want to take the tacky road and NOT define an array, then be my guest and create a prototype method push for object types. That way you can call push on objects. That'll be really silly though and you'd run in loads of issues like when trying to pop() or unshift() elements in your object (that you want to treat like an array).

Answer 2

Replacing the line
$scope.messages: [];
by
$scope.messages = [];
may fix your issue.