angular push object into associative array

Question

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

you might want to share the error message and a little more of the source code around this call.. — The Fabio
– The Fabio, Commented Jan 8, 2022 at 4:48
@TheFabio this is the error i get ERROR TypeError: this.messages.push is not a function — Exsite
– Exsite, Commented Jan 8, 2022 at 4:51
Hi, what is the type of messages. I suspect it's not an array. push is only supported for array variable. — Yong Shun
– Yong Shun, Commented Jan 8, 2022 at 5:39

Misha Mashina · Accepted Answer · 2022-01-08 07:48:01Z

2

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

edited Jan 8, 2022 at 7:48

answered Jan 8, 2022 at 6:47

Misha Mashina

2,1262 gold badges6 silver badges12 bronze badges

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

6 Comments

Exsite Over a year ago

thanks for your help, It did work somewhat, the solution seems to reset this.messages completely

Misha Mashina Over a year ago

Hm what do you mean by completely reset?

Exsite Over a year ago

I have multiple messages under one date. the solution removes all other messages under the newly created date and shows only the last created message. I have updated the question with multiple data. Thanks for your help

Misha Mashina Over a year ago

Ah didn't know that :) So just do this.messages[newDate].push(resp.message)

Misha Mashina Over a year ago

Thank you. I've edited the answer to include these changes, for any future reference.

|

Collectives™ on Stack Overflow

angular push object into associative array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related