I am developing a chat application with ionic/angular and laravel back end. I am unable to push the server response into the existing array.

To get all chat messages from the server

 getConversations(standardId) {
this.data.getConversations(standardId).subscribe(data => {
  this.messages = data;
  this.logScrollEnd();
  console.log(data);
}, err => {
  console.log(err);
});}

this is the object i receive once i call getConversations()

{
"28-12-2021": [
    {
        "id": 23,
        "message": "hi there",
        "user_id": 6,
        "standard_id": 6,
        "message_type": "text",
        "created_at": "2021-12-28T08:17:28.000000Z",
        "updated_at": "2021-12-28T08:17:28.000000Z",
        "user": {
            "id": 6,
            "name": "test school2 owner",
            "email": "[email protected]",
            "mobile": "1234567867",
            "email_verified_at": null,
            "deleted_at": null,
            "created_at": "2021-12-28T08:13:19.000000Z",
            "updated_at": "2021-12-28T08:13:19.000000Z",
            "roles": [
                {
                    "id": 1,
                    "role": "school",
                    "created_at": null,
                    "updated_at": null,
                    "pivot": {
                        "user_id": 6,
                        "role_id": 1
                    }
                }
            ]
        },
        "standard": {
            "id": 6,
            "standard_type_id": 1,
            "name": "LKG Div A",
            "school_id": 3,
            "online_link": "",
            "online_link_type": "",
            "created_at": "2021-12-28T08:13:19.000000Z",
            "updated_at": "2021-12-28T08:13:19.000000Z"
        }
    },
    {
        "id": 24,
        "message": "another message",
        "user_id": 6,
        "standard_id": 6,
        "message_type": "text",
        "created_at": "2021-12-28T08:17:28.000000Z",
        "updated_at": "2021-12-28T08:17:28.000000Z",
        "user": {
            "id": 6,
            "name": "test school2 owner",
            "email": "[email protected]",
            "mobile": "1234567867",
            "email_verified_at": null,
            "deleted_at": null,
            "created_at": "2021-12-28T08:13:19.000000Z",
            "updated_at": "2021-12-28T08:13:19.000000Z",
            "roles": [
                {
                    "id": 1,
                    "role": "school",
                    "created_at": null,
                    "updated_at": null,
                    "pivot": {
                        "user_id": 6,
                        "role_id": 1
                    }
                }
            ]
        },
        "standard": {
            "id": 6,
            "standard_type_id": 1,
            "name": "LKG Div A",
            "school_id": 3,
            "online_link": "",
            "online_link_type": "",
            "created_at": "2021-12-28T08:13:19.000000Z",
            "updated_at": "2021-12-28T08:13:19.000000Z"
        }
    }
],
"29-12-2021": [
    {
        "id": 24,
        "message": "hi",
        "user_id": 6,
        "standard_id": 6,
        "message_type": "text",
        "created_at": "2021-12-29T13:31:45.000000Z",
        "updated_at": "2021-12-29T13:31:45.000000Z",
        "user": {
            "id": 6,
            "name": "test school2 owner",
            "email": "[email protected]",
            "mobile": "1234567867",
            "email_verified_at": null,
            "deleted_at": null,
            "created_at": "2021-12-28T08:13:19.000000Z",
            "updated_at": "2021-12-28T08:13:19.000000Z",
            "roles": [
                {
                    "id": 1,
                    "role": "school",
                    "created_at": null,
                    "updated_at": null,
                    "pivot": {
                        "user_id": 6,
                        "role_id": 1
                    }
                }
            ]
        },
        "standard": {
            "id": 6,
            "standard_type_id": 1,
            "name": "LKG Div A",
            "school_id": 3,
            "online_link": "",
            "online_link_type": "",
            "created_at": "2021-12-28T08:13:19.000000Z",
            "updated_at": "2021-12-28T08:13:19.000000Z"
        }
    }
]}

I am using laravel echo on the frontend

echo.private(`standards.${this.userStandardId}`)
  .listen('NewMessage', (resp) => {
    console.log('joined standards.', this.userStandardId);
    console.log('response: ', resp);
    this.messages.push(resp);
    this.logScrollEnd();

  })

and this is the response i get from laravel echo when i submit a new chat

{
"message": {
    "id": 55,
    "message": "hi there",
    "user_id": 6,
    "standard_id": 6,
    "message_type": "text",
    "created_at": "2022-01-07T20:31:57.000000Z",
    "updated_at": "2022-01-07T20:31:57.000000Z",
    "user": {
        "id": 6,
        "name": "test school2 owner",
        "email": "[email protected]",
        "mobile": "1234567867",
        "email_verified_at": null,
        "deleted_at": null,
        "created_at": "2021-12-28T08:13:19.000000Z",
        "updated_at": "2021-12-28T08:13:19.000000Z",
        "roles": [
            {
                "id": 1,
                "role": "school",
                "created_at": null,
                "updated_at": null,
                "pivot": {
                    "user_id": 6,
                    "role_id": 1
                }
            }
        ]
    },
    "standard": {
        "id": 6,
        "standard_type_id": 1,
        "name": "LKG Div A",
        "school_id": 3,
        "online_link": "",
        "online_link_type": "",
        "created_at": "2021-12-28T08:13:19.000000Z",
        "updated_at": "2021-12-28T08:13:19.000000Z"
    }
}}

I want to push the response to the above array. But get an error when i try this

this.messages.push(resp);

ERROR TypeError: this.messages.push is not a function

Kindly help me resolve this, thanks in advance

CodePudding user response：

Since new element of getConversations response has a key as date of message's created_at value, we'll create new date in that format (inside echo when we get response):

let day = resp.message.created_at.slice(8,10);
let month = resp.message.created_at.slice(5,7);
let year = resp.message.created_at.slice(0,4);
let newDate = day '-' month '-' year;

Then we'll just make the message a new array and add it as a value to newDate key in our object:

this.messages[newDate] = [resp.message];

However, if there's (or is expected to be) more messages under the key(newDate), we need to push an object instead:

this.messages[newDate].push(resp.message);