When refreshing a JavaScript array of objects, it creates duplicate entries within the array

Question

When refreshing a JavaScript array of objects, it creates duplicate entries within the array

Currently, I am developing a chat application within a Vue project and experimenting with different features.

A fully-featured chat app must have the ability to live-update "seen" states. This means that when one user views the last sent message, the other user should see a previously grey dot next to their sent message change to the other person's profile picture (this is not crucial to the main issue).

I am utilizing socket.io to trigger various events back and forth as these updates occur.

The overall flow is working smoothly so far, except for one specific aspect:

 messagesArray.value.findLast(function (message: any) {
        if (message.showUnRead === true && message.senderID === data.senderID) {
          delete message.showUnRead;
          message.read = true;
        }
        if (message.showRead === true && message.senderID === data.senderID) {
          delete message.showRead;
          message.read = true;
         
        }

Initially, this code functioned well. However, when I introduced changes to object values, it resulted in duplicating itself within the array.

Instead of just updating the messagesArray.value's last object, it updated that object and then added another identical one after it.

This issue only arises when I include the object value manipulation functions ('delete message.showRead' or 'message.read').

My assumption is that the findLast() function returns the object itself and subsequently appends this returned object back into the array, causing duplication.

I would prefer not to use the array.pop() method as this interferes with animations that are set up using transitiongroup. Additionally, it seems redundant to modify an object's values, retrieve the object again, make changes, and then manually delete the duplicate. It may be more efficient to find a different approach.

Ultimately, my goal is to solely update specific key-value pairs of the located (findLast()) object.

Therefore, my question is:

Is there a built-in function that accomplishes this task?
If such a function does not exist, how should I tackle this problem without experiencing disruptive effects from using pop()?

Various methods like pop(), slice(), and splice() have been attempted, all resulting in unnecessary complications.

javascript arrays vue.js object

Answer 1

Answer №1

At the outset, I want to clarify that the issue in my code did not stem from the findLast() function or how I utilized it.

However, due to common oversight during debugging, I too have encountered incorrect solutions related to my (initially misidentified) problem,

It is important to remember that sometimes you struggle to find a solution because you mistakenly assumed that you had correctly identified the problem in the first place and simply could not find the solution.

I am currently working on a chat application that includes features like displaying "unseen" and "seen" states with either a grey circle or a small circle containing the other user's profile picture. The system utilizes mongodb as an off-server message database and socket.io for real-time communication.

The app consists of a "parent" module where users can input text to send to each other and a "child" module where messages are displayed on the left or right side of the container based on whether they were sent or received by the current user.

In the "child" module, messages are stored in an array that is initially retrieved from the server upon first rendering. This array is updated on both ends using socket.io triggers only when the other user is actively present in the chat window.

Each message is represented as an object containing the actual message, date, senderID, sendToID, and a default "read" key set to "false".

The issue arose when I triggered the following sequence back and forth via socket.io:

The sender sends a message (updating the mongodb database with a default "read" value of "false") --> additionally, the sender's child component receives the newly sent message through props, updates its own messagesArray with the new message using Vue's watch functionality

The child component receiving the message

    watch(
      () => props.selfMessage,
      (newvalue) => {
      
        messagesArray.value.push(newvalue);
      },
      { deep: true }
    );

The receiver gets the message via socket.io, updating their own array with the message
The receiver's script checks if the new message has a "read" status of "false" using Vue's vElementVisibility function. When the message is initially received and in view, it changes the "read" state to "true" and sends a "readMessage" trigger via socket.io
The original sender receives the "readMessage" trigger, thereby updating their messagesArray's last message (which always represents the latest sent message) by changing the "read" status to "true" --> this triggers the rendering of a grey circle next to the profile picture

During step 4, the code mentioned in the original query was as follows:

    props.socket!.on("messageRead", function (data: any) {
       messagesArray.value.findLast(function (message: any) {
    if (message.showUnRead === true && message.senderID === data.senderID) {
      delete message.showUnRead;
      message.read = true;
    }
    if (message.showRead === true && message.senderID === data.senderID) {
      delete message.showRead;
      message.read = true;
     
    }

    });

During this final process, the "messageRead" trigger executes a function that modifies the most recently added message object - originally pushed into the messagesArray by appending the selfMessage's new value from the parent module into the array

Essentially, this is what I discovered through trial and error: I should not directly push the new value from selfMessage into the messagesArray because doing so would inadvertently trigger the Vue watch function again. Instead, I need to create a copy of the new value and insert that into the messagesArray

    watch(
      () => props.selfMessage,
      (newvalue) => {
       
        const newMessage = { ...newvalue };
        messagesArray.value.push(newMessage);
      },
      { deep: true }
    );

The lesson learned here is that when dealing with complex processes, it is crucial to revisit the foundational aspects where the process originates. Sometimes, overlooked details combined with existing methods can lead to unexpected issues.

Answer 2

At the outset, I want to clarify that the issue in my code did not stem from the findLast() function or how I utilized it.

However, due to common oversight during debugging, I too have encountered incorrect solutions related to my (initially misidentified) problem,

It is important to remember that sometimes you struggle to find a solution because you mistakenly assumed that you had correctly identified the problem in the first place and simply could not find the solution.

I am currently working on a chat application that includes features like displaying "unseen" and "seen" states with either a grey circle or a small circle containing the other user's profile picture. The system utilizes mongodb as an off-server message database and socket.io for real-time communication.

The app consists of a "parent" module where users can input text to send to each other and a "child" module where messages are displayed on the left or right side of the container based on whether they were sent or received by the current user.

In the "child" module, messages are stored in an array that is initially retrieved from the server upon first rendering. This array is updated on both ends using socket.io triggers only when the other user is actively present in the chat window.

Each message is represented as an object containing the actual message, date, senderID, sendToID, and a default "read" key set to "false".

The issue arose when I triggered the following sequence back and forth via socket.io:

The sender sends a message (updating the mongodb database with a default "read" value of "false") --> additionally, the sender's child component receives the newly sent message through props, updates its own messagesArray with the new message using Vue's watch functionality

The child component receiving the message

    watch(
      () => props.selfMessage,
      (newvalue) => {
      
        messagesArray.value.push(newvalue);
      },
      { deep: true }
    );

The receiver gets the message via socket.io, updating their own array with the message
The receiver's script checks if the new message has a "read" status of "false" using Vue's vElementVisibility function. When the message is initially received and in view, it changes the "read" state to "true" and sends a "readMessage" trigger via socket.io
The original sender receives the "readMessage" trigger, thereby updating their messagesArray's last message (which always represents the latest sent message) by changing the "read" status to "true" --> this triggers the rendering of a grey circle next to the profile picture

During step 4, the code mentioned in the original query was as follows:

    props.socket!.on("messageRead", function (data: any) {
       messagesArray.value.findLast(function (message: any) {
    if (message.showUnRead === true && message.senderID === data.senderID) {
      delete message.showUnRead;
      message.read = true;
    }
    if (message.showRead === true && message.senderID === data.senderID) {
      delete message.showRead;
      message.read = true;
     
    }

    });

During this final process, the "messageRead" trigger executes a function that modifies the most recently added message object - originally pushed into the messagesArray by appending the selfMessage's new value from the parent module into the array

Essentially, this is what I discovered through trial and error: I should not directly push the new value from selfMessage into the messagesArray because doing so would inadvertently trigger the Vue watch function again. Instead, I need to create a copy of the new value and insert that into the messagesArray

    watch(
      () => props.selfMessage,
      (newvalue) => {
       
        const newMessage = { ...newvalue };
        messagesArray.value.push(newMessage);
      },
      { deep: true }
    );

The lesson learned here is that when dealing with complex processes, it is crucial to revisit the foundational aspects where the process originates. Sometimes, overlooked details combined with existing methods can lead to unexpected issues.

When refreshing a JavaScript array of objects, it creates duplicate entries within the array

Answer №1

Similar questions

I created an image that can be clicked on, but unfortunately it only functions properly on the

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

Real-time data feeds straight from JSON

Exploring the Possibilities with NodeJS and Socket.IO

The Nuxt Content Shiki plugin encountered an ERROR: "Page not found at /home"

Ensure that you wait for all asynchronous $http requests to finish in AngularJS before continuing

Encountered an issue with resolving the module specifier while attempting to import a module

Changing JavaScript array elements from strings to objects

I am converting a class component to a functional component within a React-Redux-Firebase project

Encountering difficulties while attempting to delete with a router.delete command - receiving a 404 not

The Javascript Image() function fails to load or render

Eliminate the unnecessary code repetition in my functions using Typescript

Update the DIV element's class to reflect whether the quiz answer provided is correct or incorrect

Discovering the geographical location of all users using Node.js: A step-by-step guide

Retrieving precise passed arguments in the $(document).ready function

How do I remove all elements from the Canvas in R3F?

Exploring the geographical boundaries of a Google Map region using coordinates and polygons

Incorporate text/sentences from a file into a collection of strings in C

Exploring the Boundaries of JavaScript Libraries

locate the presence of a specific letter within a sequence of characters