Auto-updating Angular $scope variables

I am facing an issue with two variables in my code. Whenever I update one variable, the other variable also gets updated automatically. Can someone please help me understand what is causing this behavior?

$scope.pages = [];
$scope.pagesSave = [];

var functionName = function(){

  $service.doThing1().then(function(res1){
    $scope.pagesSave = res1;
    console.log(res1)
    $service.doThing2().then(function(res2){
      $scope.pages = $service.formatThings(res2, res1);
      console.log($scope.pages)

  }, function(err){});
}, function(err){});

The expected result is for $scope.pages to store the final formatted data.

Similarly, $scope.pagesSave should contain the unformatted data.

However, when I check these variables using console logs, they appear to be identical.

Interestingly, the console log immediately after executing $service.doThing1() shows that "res1" has the correct length but only contains the data from $scope.pages, which can be seen in this image:

In the console log, 2 pieces of data are missing even before the formatting function is applied.

https://i.sstatic.net/2XJBA.png

If anyone knows why this is happening, your insights would be greatly appreciated.

For reference, I am using Chrome to view the console logs.

Answer №1

It appears that within your formatThings function, the value of res1 is being returned as the result. This means that $scope.pagesSave will be set to res1, which will ultimately be the same as $scope.pages.

To resolve this issue, I recommend using the angular.copy() method to create a deep copy of res1, and then use the copied object to make any necessary alterations. Could you please provide the code for your formatThings function?

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

Retrieve data from multiple tables using knex.js

I am trying to use Express.js and knex.js to render data from two tables using only one GET function. I have successfully queried each table individually (schools or students), but I am unsure how to query both at the same time. Any ideas? app.get('/ ...

Creating a sidebar with child elements in Vitepress: A beginner's guide

I'm having trouble displaying my folder tree in the sidebar. When I click on a parent element like Group, the children elements are not showing up as expected. https://i.sstatic.net/kdc98.png One strange thing is that the Group elements do not have ...

Locate the div in the array that includes ValueA, and save ValueB from it into a new variable

When the button is clicked, I retrieve the current value of a Select control using the following code... $('#myBtn').on('click', function (clickEvent) { var nameSelected = document.getElementById('mySelectControl').getEle ...

There seems to be an issue with the loading of the JSON file

I have created a JSON representation that I would like to visualize using D3JS as a treemap. Following this tutorial: https://bl.ocks.org/d3indepth/d4f8938a1fd0914b41ea7cb4e2480ca8 The JSON I generated from the data is displaying correctly in the treemap ...

Is it possible to incorporate multiple IDs into the changeImage function for a radio

I've encountered an issue with my function that changes images based on radio button selections. It works fine for one image slider, but now I want to make it available for a second slider. The problem is that when I use the radio buttons for the seco ...

Unresponsive Three.js OrbitControls

*Update: I'm feeling a bit confused because I don't believe my function is causing this issue. It seems that simply double-clicking without moving the mouse triggers this behavior consistently, even in the Three.js example. I'm still unsure ...

Guide for utilizing a table value as a parameter in a mySQL query with PHP

My website features an HTML table that is filled with data pulled from a mySQL table using PHP. Each row in the table is clickable, and when clicked, it opens a modal that contains a form to update and submit data back to the database using a mysql update ...

Leveraging the spread operator for setting state in a series of consecutive updates

Within my component, I am retrieving values from local storage and attempting to load them into the state when the component mounts. However, only the last property that I add seems to be included in the state. I have confirmed that all values are present ...

Encountered an issue when attempting to access a file on the desktop using Node.js

Here is the code I am using to read a simple file from my desktop: module.exports = function (app) { app.get('/aa', function(req, res) { fs = require('fs'); fs.readFile('‪C:\\Users\\t5678 ...

"Encountering a jQuery JavaScript issue when utilizing the $(...) element

I am in the process of migrating some older code to jQuery: let xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { $("#" + ajaxArea).html(xmlHttp.responseText); $("#" + ajaxArea).attr('t ...

Guide to sending jQuery data back to main class in TypeScript

Hi everyone, I'm diving into the world of typescript and JQuery. I have a simple question. In my typescript class called DatePicker, I am calling a function. Here's a snippet of the code: Class DatePicker { private pickerData; public update( ...

Unable to retrieve share count data from the AddThis API using the <script/> tag

After spending several hours attempting to solve this issue on my own, I have decided to reach out to the experts in the Stackoverflow community. The script code I am using is functioning correctly for the Facebook API but seems to be encountering issues ...

The integration between Mongoose and GraphQL does not support populating models

It seems like I have encountered a unique issue that none of the existing solutions have been able to resolve. I am running a backend server with Apollo Server + Mongoose on localhost. However, I am facing difficulties in populating or creating the collect ...

What is the most efficient method to import multiple MaterialUI components using a shared namespace without requiring the entire library to be imported

In order to prevent name mixing with other libraries, I want my MaterialUI components to be under the same namespace. For example, ensuring that <Box> references <MaterialUI.Box> and not <SomeOtherLibrary.Box>. Although it seems like a si ...

Utilize AngularJS to reattach a DOM node rather than simply updating it

Within my template, I have the following setup: <div> <a ng-href="tel:{{phone}}">{{ phone }}</a> </div> Angular updates the link's DOM node when $scope.phone changes, linking it to the new phone number with no issues. Ho ...

AngularJS Service failing to appear on screen

I am trying to access my Github information using Github's API. I can see the correct information when I log my http request, but for some reason it is not showing up on the page. There are no errors being thrown, but the requested data is not display ...

Retrieving parameters from within iframe (child)

I currently have an embedded Iframe within a website, with both residing on different domains that I own. My goal is to pass a query parameter to the src attribute of the iframe. <iframe id="iframe" title="Survey" allowtr ...

What is the method for incorporating a timeout in a promise?

After exploring various methods for adding timeouts to promises, it appears that most rely on the setTimeout() function. Here is the formal definition: The setTimeout() function executes a specified function or evaluates an expression after a set number of ...

Discover the magic of v-model in Vue 3 Composition API

Can someone help with managing reactivity in form fields using Vue3 Composition API? I'm having trouble getting my code to work correctly. When I type text into the input field, Vue devtools does not show any changes in the ref data. Here's a sim ...

The function $templateCache.get does not return a valid value

$http.get('template/alert.html', { cache: $templateCache }); $scope.clickedButton = function () { console.log($templateCache.info()); // <-- Object {id: "templates", size: 1} console.log($templateCache.get('alert.html')); ...