angular 将对象推入关联数组

Question

我正在开发一个带有 ionic/angular 和 laravel 后端的聊天应用程序。我无法将服务器响应推送到现有数组中。

从服务器获取所有聊天消息

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

这是我调用 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": "testschool2@pp.com",
            "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": "testschool2@pp.com",
            "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": "testschool2@pp.com",
            "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"
        }
    }
]}

我在前端使用 laravel echo

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

  })

这是我在提交新聊天时从 laravel echo 得到的回复

{
"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": "testschool2@pp.com",
        "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"
    }
}}

我想将响应推送到上面的数组。但是当我尝试这个时出现错误

this.messages.push(resp);

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

请帮我解决这个问题，在此先感谢

Answer 1

由于 getConversations 响应的新元素有一个键作为消息 created_at 值的日期，我们将以该格式创建新日期（当我们收到响应时在 echo 内）：

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;

然后我们将消息创建为一个新数组并将其作为值添加到我们对象中的 newDate 键中：

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

但是，如果在 key(newDate) 下有（或预计会有）更多消息，我们需要推送一个对象：

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

angular 将对象推入关联数组

angular push object into associative array

ionic-framework

angular