The characteristics of angular js Service/Factory and how they influence functionality

I'm seeking clarification on the behavior of AngularJS, especially in terms of JavaScript.

In my code, I have a controller that has an Angular factory injected into it.

Here's a snippet from the controller:

$scope.localObjCollection = myObjFactorySvc.getObjCollection();

Suppose that

myObjFactorySvc.getObjCollection()
returns the following object:

[{"id":1,"name":null,"address":null,"email":null},
{"id":2,"name":null,"address":null,"email":null},
{"id":3,"name":null,"address":null,"email":null},
{"id":4,"name":null,"address":null,"email":null}
]

Essentially, I am using the factory to retrieve the collection and storing it in $scope.localObjCollection. My inquiry is whether $scope.localObjCollection contains a copy of the data returned by getObjCollection(), or just a reference.

If later in the controller, I were to perform

$scope.localObjCollection.push(newObj)
, would it also modify the original collection within the Factory? It seems like it should, but I want to grasp the precise functionality.

Answer №1

In JavaScript, arrays are considered objects and in JS, objects are always passed or assigned by reference. This means that any modifications made to the array will also affect the original collection in the Factory. For example, if your myObjFactorySvc.getObjCollection() function is defined like this:

myObjFactorySvc.getObjCollection = function() { return someArrayVariable; }

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

Navigate to the middle of the visible area

Is there a way to automatically center a div when it is clicked, so that it scrolls to the middle of the browser viewport? I have seen examples using anchor points but I want to find a different solution. Any ideas on how to accomplish this without using ...

Leverage environment variables in React JS to define distinct API URLs for production and development environments

For my React app, I started with create-react-app as the boilerplate. To make a request to my local server, I'm using fetch. fetch("http://localhost:3000/users") .then(function(res){ return res.json() }) .then(function(res){ return res.data }) ...

endless refreshing material ui accordion

Facing an issue with infinite rerender while trying to create a controlled accordion component using Material UI accordion. Here is the code snippet, any insights on why this could be causing an infinite rerender? const [expanded, setExpanded] = React.us ...

Enhancing HTML with VueJS and managing imports

After successfully developing a Single Page Application using VueJS, I realized that the SEO performance was not up to par. To combat this, I decided to create a standard HTML website with some pages incorporating VueJS code (since my hosting environment d ...

Generating an MD5 hash for a UTF16LE string in Javascript (with no BOM and excluding 0-byte at the end) - Illustrated with a C#

I've been trying to figure out how to get an MD5 Hash of a UTF16-LE encoded string in JavaScript for the past few days. I have a method in C# as an example, but I'm not sure how to replicate it in JavaScript. Example: public string GetMD5Hash ( ...

Guide to inputting text into the Dev element

I am encountering a challenge with automating gist creation on GitHub. The issue arises when trying to input text into the gist content-box (see attached image). Despite attempting to use Javascript executer, I have not been successful. JavascriptExecutor ...

Check and validate the adjacent field whenever a change is detected in this field in Angular

Currently, I have a select menu with options and a text field that accepts numerical input. The text field needs to adhere to specific ranges based on the selection from the select menu, which is managed through custom validation. My dilemma lies in trigge ...

Mastering the art of handling and extracting multiple parameters from URLs in AngularJS

Within this setup, there are 2 distinct views each controlled by their respective controllers. The functionality involves clicking a link in View1 to load View2 and read the parameters associated with it. However, despite attempts made, an alert is popping ...

The performance of aframe is being affected by the use of bounding boxes for collision

Hey there! I recently created a component to handle collision detection for primitive and non-primitive shapes. While using the bounding box collision feature provided in three.js, everything was working smoothly. However, when applying it to custom object ...

Unable to authenticate through LinkedIn

On my website, I am attempting to retrieve the user's first name, last name, and email using LinkedIn. Here is what I have done so far: In my LinkedIn App settings, under the Default Scope (OAuth User Agreement), I have selected the following options ...

Having trouble accessing the POST RESPONSE json in ReactJS and NodeJS

I have set up my own API server that is connected to a MySQL database. Whenever I send a request to the server, everything seems fine. I can see the input from the browser and the output from the database in the console. However, I am unable to see any new ...

Attempting to get Masonry-Layout functioning properly in Safari using imagesLoaded

I recently set up a Masonry Gallery for a WordPress site using Bootstrap 5 with 'Masonry-Layout'. Everything was working perfectly, except in Safari where the layout kept breaking. I know the solution is supposed to be 'imagesLoaded', b ...

Choosing options from an API response in a REACT-JS application

I have a Select Component in my application and I want it to automatically show the selected data once the response is received. import Select from "react-select"; <Select menuPlacement="auto" menuPosition="fixed" ...

Can anyone guide me on troubleshooting the firebase import error in order to resolve it? The error message I am encountering is "Module not found: Error:

When attempting to import the 'auth' module from my 'firebase.js' file, I encountered an error. I used the code import {auth} from "./firebase", which resulted in the following error message: Error: Unable to locate module &a ...

Popup confirming successful subscription to Magento newsletter

Is there a way to create a pop-up message box that appears after the user subscribes to the newsletter? "Your subscription has been confirmed [OK]" I specifically need this functionality to be implemented using JavaScript or jQuery as I want to customi ...

Position a dynamic <div> in the center of the screen

My goal is to design a gallery page with a list of thumbnails, where clicking on a thumbnail will open the related image in a popup div showing its full size. The issue I'm facing is how to center the popup div on the screen, especially when each pic ...

Storing audio files in Firebase Cloud Database and displaying them in React js + Dealing with an infinite loop problem

Lately, I've been encountering a persistent issue that has proven to be quite challenging. Any assistance would be greatly appreciated. Thank you in advance. The objective is to create a form that allows for the easy addition of new documents to the ...

Confusion surrounding the purpose of an AngularJS controller function

After experimenting with some basic tutorials in AngularJS, I came across a discrepancy in how controllers are declared and used. For instance, in this JSFiddle link - http://jsfiddle.net/dakra/U3pVM/ - the controller is defined as a function name, which w ...

Showing information in Vue.js using v-for loops

I'm currently working on a basic shopping cart system using Laravel and Vue.js. I've been able to add items to the basket and retrieve them successfully up to a certain point, but I'm facing challenges when it comes to displaying these items ...

The client sent a risky Request.Path value that raised red flags

For a university project, I am attempting to access an English translation of the Quran from quran.com using the provided link: Although this link works correctly when entered directly into a browser, I encounter an error when trying to use it in my Angul ...