Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use JS to aggregate chat records together, with a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Realization idea

Let's take a look at my data first, as follows:

[{"createTime": "2020-12-21 20:58:19", "avatarSrc": "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg"," msgId ":" 121710f399b84322bdecc238199d6888 "," msgText ":" / bad smile / "," userName ":" fantastic programmer "," userId ":" c04618bab36146e3a9d3b411e7f9eb8f "," status ": false}, {" createTime ":" 2020-12-21 20:58:22 " "avatarSrc": "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg"," msgId ":" 121710f399b84322bdecc238199d6888 "," msgText ":" anyone else "," userName ":" fantastic programmer "," userId ":" c04618bab36146e3a9d3b411e7f9eb8f "," status ": false}, {" createTime ":" 2020-12-21 20:58:46 "," avatarSrc ":" https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg", " "msgId": "121710f399b84322bdecc238199d6888", "msgText": "chat transcript Added message delivery time "," userName ":" fantastic programmer "," userId ":" c04618bab36146e3a9d3b411e7f9eb8f "," status ": false}, {" createTime ":" 2020-12-21 20:58:52 "," avatarSrc ":" https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg", "msgId": "121710f399b84322bdecc238199d6888", "msgText": "it looks much more convenient now" "userName": "fantastic programmer", "userId": "c04618bab36146e3a9d3b411e7f9eb8f", "status": false}, {"createTime": "2020-12-21 21:35:27", "avatarSrc": "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg"," msgId ":" 121710f399b84322bdecc238199d6888 "," msgText ":" / bad smile / "," userName ":" fantastic programmer "," userId ":" c04618bab36146e3a9d3b411e7f9eb8f " "status": false}]

Looking at the data above, we find that each message object has a createTime attribute, which is the sending time of the message, which is accurate to minutes and seconds. What we need to do now is to keep only one createTime attribute in the same minute, and render only the objects with createTime attribute in the rendering time, so that we can render the data of the same minute together.

This is the general way of thinking, let's take a look at the specific ideas:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Declare an object named timeObj, store the year-month-day of the createTime field in the message object: minutes, declare a new message record array finalTextList to store the processed data

Traverses the message record array to get the message record object currently traversed

Get the createTime property of the traversed message record object, intercept the year-month-day time: minutes, declare a variable time to save

Determine whether time exists in timeObj

Delete the createTime attribute in the traversed message logging object if it exists, and put the message logging object after deleting the attribute into the finalTextList

Otherwise, put the time into the timeObj as an attribute, and put the traversed message logging object into the finalTextList intact

After processing the data, we determine whether there is a createTime in the current rendering item when rendering, and render if it exists.

Realization process

Next, after we get the data returned by the interface, we will process it according to the above idea.

Processing the data returned by the interface

Res.data.messageTextList is a list of message records returned by the interface as shown below.

/ / message content list const messageTextList: Array = res.data.messageTextList; / / processed message content array const finalTextList: Array = []; / time storage object const timeObj: {[key: string]: boolean} = {}; / / message content list is processed. Only one creation time for (let I = 0; I < messageTextList.length) is retained for the same minute of data. Const messageObj +) {/ / message object const messageObj = messageTextList [I]; / / get the year-month-day hour of the time: const time = (messageObj.createTime as string) .substring (0,16) / / if time already exists in timeObj, remove the createTime if of the current message object (_ .has (timeObj, time)) {/ / remove the createTime attribute _ .unset (messageObj, "createTime"); / / put the message object that removes the createTime attribute into the processed message array finalTextList.push (messageObj) } else {/ / put time as key into timeObj timeObj [time] = true; / / put message objects into the processed message array finalTextList.push (messageObj) intact;}} / / render message list this.renderPage (finalTextList, {})

The msgListType in the above code is defined as the type of the message logging object, the method with has as lodash is used to determine whether the object contains an attribute, and the method with unset as lodash is used to remove an attribute from the object.

Processing push data

When we receive the data pushed by the server, we need to aggregate the message pushed by the server into the rendered chat record, and render the new time if it is not the same minute, so we need to take out the createTime field of the current push message, intercept the year-month-day: determine whether it is in the list of rendered message records, and render intact if it does not exist, otherwise delete the createTime field and render The code is as follows:

/ / receive the new message pushed by the server, render a single message object const thisSenderMessageObj: msgListType = {msgText: msgObj.msgText, avatarSrc: msgObj.avatarSrc, userId: msgObj.userId, userName: msgObj.userName, createTime: msgObj?.createTime}; / / find the message in the message record list that is the same minute as the new message, and remove the createTime object for (let I = 0; I < this.senderMessageList.length) of the new message Const messageObj +) {const messageObj: msgListType = this.senderMessageList [I]; / / intercept the year-month-day-hour: minute of the time when the current message and the new message were sent, and determine whether they are equal to if (_ .isEqual (messageObj.createTime?.substring (0Magne16), thisSenderMessageObj.createTime?.substring (0L16)) {/ / remove the createTime attribute _ .unset (thisSenderMessageObj, "createTime") of the new message. }} / / parse and render this.messageParsing (thisSenderMessageObj)

Messages pushed by msgObj for the server

Render pa

Next, let's take a look at the rendering code for the page, as shown below, rendering only the data that contains the createTime attribute in the object

{{item.createTime.substring (5,16)}}

Realize the effect

Finally, let's take a look at the effect of the implementation, as follows:

Thank you for reading this article carefully. I hope the article "how to use JS to aggregate chat records" shared by the editor will be helpful to everyone. At the same time, I also hope you can support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.