Modifying an object's value before pushing it into an array in JavaScript

I've been struggling to find the right keyword to search for my issue. I've spent hours trying to figure out what's wrong, but it seems like a simple case of pushing an object into an array. The problem arises when I try to log the values of the array, as two of the object keys' values are being altered. This is happening within an AngularJS controller.

Here's an example object I've added to a service:

onbd.data.add = {
    predefined: [{
        activity : 'morning jog',
        purpose  : 'grow',
        days     : '0 1 2 3 4 5 6',
        start    : '05:30',
        stop     : '06:00',
        meta     : 'repeats everyday on 5:30 AM for half an hour'
    }]
};

Within the controller, there's a function triggered by an ng-click event that pushes the data from the service into an AJAX data array:

th.setActivity = function (data) {
    // The data is an object inside the predefined key in the service above
    var newAct = {
        activity : data.activity,
        purpose  : data.purpose,
        day      : data.days,
        start    : data.start,
        stop     : data.stop
    };
    th.list.push(newAct);
};

Upon logging newAct, I get the following output:

newAct Object {
    activity: "morning jog",
    purpose: "grow",
    day: "0 1 2 3 4 5 6",
    start: "05:30",
    stop: "06:00"

}

However, when I log th.list, the output shows a change in the day and purpose keys. This strange behavior only occurs when executing the th.setActivity function. Any insights on why this might be happening?

Thank you for your help.

Answer №1

Thanks to a heads-up from @tymeJV, I was able to figure out the issue with the console trying to keep the object reference up to date. By using console.log() one by one, I was able to pinpoint the problem. It turns out that the discrepancy in values was caused by other functions modifying the object, as @tymeJV pointed out.

My mistake was assuming that the modifying functions expected a string value when in reality they needed an object, as specified by the service. I have made the necessary updates, and everything is working fine now.

Lesson learned, silly mistake on my part :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on how to perform a server-side redirection to a different page in a Nextjs application without refreshing the page while maintaining the URL

I am working on a [slug].js page where I need to fetch data from an API to display the destination page. export async function getServerSideProps({ query, res }) { const slug = query.slug; try { const destination = await RoutingAPI.matchSlu ...

Can an action be activated when the mouse comes to a halt?

Currently, I am having trouble triggering an event when a user stops moving their mouse over a div element. The current event is set up to show and follow another element along with the mouse movement, but I want it to only display when the mouse stops mov ...

Display or conceal navigation items in AngularJS based on the user's logged-in status

My AngularJS app is a single-page application that works with Express, node.js, and MongoDB using Mongoose. I am also implementing Passport for user management/authentication. I want the navbar items to dynamically change based on whether a user is logged ...

Steps for sending an array from PHP to an AJAX response in JavaScript

How can I send an array from PHP to an AJAX call? AJAX call: $.post('get.php', function(data) { alert(data); }); get.php $arr_variable = array('033', '23454'); echo json_encode($arr_variable); When the data is alert ...

How come my data is not appearing on the screen despite receiving a result in the console log?

I am facing an issue with displaying data obtained from Supabase. I am passing the data as a prop and using map to iterate over it in order to show the required values. However, despite logging the correct results for `programme.title`, nothing is being re ...

I'm encountering an issue when trying to build a React application

Unable to perform EPERM operation, the command "mkdir c:" is not found when trying to create a React app using npx create-react-app myapp ...

What is the best way to pass multiple variables to a PHP file with AJAX using a GET request?

Can you help me figure out how to send both an I.D. value and a name value to a php file using ajax? Currently, I am successfully sending just the I.D. variable, however, when I attempt to add the name variable, the function stops working. The code that w ...

retrieving data from a php file using ajax for a post request

Utilizing ajax, I have invoked the page search.php: function search(){ var title=$("#search").val(); if(title!=""){ $.ajax({ type:"post", url:"sear ...

Issue encountered with AJAX request using JavaScript and Express

I'm brand new to this and have been searching online for a solution, but I can't seem to figure it out. It's possible that I'm making a basic mistake, so any assistance would be greatly appreciated. I'm trying to create a simple f ...

What is the best way to display a removed item from the Redux state?

Display nothing when the delete button is clicked. The issue seems to be with arr.find, as it only renders the first item regardless of which button is pressed, while arr.filter renders an empty list. reducer: export default function reducer(state = initi ...

Is it possible to utilize a map in Python or incorporate other advanced functions to efficiently manage indices?

When working with higher order functions in JavaScript, we have the ability to access the element, index, and iterable that the function is being performed on. An example of this would be: [10,20,30].map(function(element, index, array) { return elem + 2 ...

Ways to detect scrolling activity on the v-data-table module?

Are you looking for a way to detect scrolling events on the v-data-table component in Vuetify framework? I am referring to the scenario where the table has a fixed height, causing the table body to scroll. <v-data-table fixed-header :height=400 : ...

Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock. <div id="fb-root"></div><script>(function(d, s, id) {va ...

Encountered issue #98123: Failed to generate development JavaScript bundle during `gatsby develop` using Webpack

To set up a new Gatsby starter blog, I executed the following commands: gatsby new blog https://github.com/alxshelepenok/gatsby-starter-lumen cd blog gatsby develop However, while running gatsby develop, I encountered numerous errors labeled as ERROR # ...

Dnd-kit: item loses its place in line when dragged over Droppable area

I've encountered an issue while using @dnd-kit. The sorting function works smoothly (e.g. when I drag the 1st element, it sorts correctly), but once I reach a droppable element (green Thrash), the sorting breaks and the 1st element snaps back. You ca ...

Is there a more efficient method for creating HTML with coffeescript / jQuery besides using strings?

Today marks my first attempt at creating a "answer your own question" post, so I hope I am on the right track. The burning question in my mind was, "Is there a more efficient way to generate HTML with jQuery rather than using tag strings?" My goal is to c ...

Testing inherit from a parent class in a unit test for Angular 2

Trying to create a unit test that checks if the method from the base class is being called This is the base class: export abstract class Animal{ protected eatFood() { console.log("EAT FOOD!") } } Here is the class under test: export ...

Retrieving Information from Website Database

My goal is to import data from a web query into Excel. However, I am facing a challenge with the IP address (e.g., 10.10.111.20) because it only displays page 1 with 20 rows of entry data. When I try to navigate to page 2 or beyond, the data does not updat ...

What is the best method for retrieving the entire row data based on the maximum value in a column?

function findMaxValue() { var highestValue = Math.max.apply(Math, $('.sira').map(function() { return $(this).text() })) alert(highestValue); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"& ...

Sending form information through AjaxPassing information from a form using

Currently, I am working on a project where one page opens a thickbox of another page that contains a form. Once the form is submitted and data is written to the database, I need the parent page of the thickbox to update specific rows of the form that have ...