Tips on connecting properties of two individual JavaScript objects

Question

Tips on connecting properties of two individual JavaScript objects

Within my angular service, I have two objects with a property named nodes that I want to point to the same array. However, when I make changes to the nodes in one object, it does not reflect on the other. Here is how I am attempting to achieve this:

objectOne.nodes = [o1, o2, o3];
objectTwo.nodes = [];
angular.forEach(objectOne.nodes, function(n){
    objectTwo.nodes.push(n); // Some logic assigns nodes from objectOne to objectTwo
})

I expect changes made to objectTwo.nodes[i] to be reflected in objectOne.nodes[j], given that i and j are indices of the same node in the two different objects (assuming the order may differ). Unfortunately, this does not seem to work as intended. Is there an error in the way I push nodes into objectTwo?

For context, I am modifying the objectTwo node directly within the DOM. Both objectOne and ObjectTwo exist as variables in memory within my service.

javascript angularjs arrays pass-by-reference

Answer 1

Answer №1

When you push the same reference of the object, any changes made to the new array will also impact the original source.

var obj1 = {}, obj2 = {}, obj3 = {};

obj1.nodes = [{ id: 1, name: 'o1' }, { id: 2, name: 'o2' }, { id: 3, name: 'o3' }];
obj2.nodes = [];
obj3.nodes = [];

obj1.nodes.forEach(function (o) {
    o.id % 2 ? obj2.nodes.push(o) : obj3.nodes.push(o);
});

obj2.nodes[1].name += '+';

console.log(obj1);
console.log(obj2);
console.log(obj3);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

When you push the same reference of the object, any changes made to the new array will also impact the original source.

var obj1 = {}, obj2 = {}, obj3 = {};

obj1.nodes = [{ id: 1, name: 'o1' }, { id: 2, name: 'o2' }, { id: 3, name: 'o3' }];
obj2.nodes = [];
obj3.nodes = [];

obj1.nodes.forEach(function (o) {
    o.id % 2 ? obj2.nodes.push(o) : obj3.nodes.push(o);
});

obj2.nodes[1].name += '+';

console.log(obj1);
console.log(obj2);
console.log(obj3);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Need a hint :

let newDiv = document.createElement("div");
let obj1 = {}, obj2 = {};
obj1.elements = obj2.elements = [];
obj1.elements.push(newDiv);
newDiv.style.color = "blue";
console.log(obj1.elements[0].style.color);
console.log(obj2.elements[0].style.color);
newDiv.style.color = "red";
console.log(obj1.elements[0].style.color);
console.log(obj2.elements[0].style.color);

Answer 4

Need a hint :

let newDiv = document.createElement("div");
let obj1 = {}, obj2 = {};
obj1.elements = obj2.elements = [];
obj1.elements.push(newDiv);
newDiv.style.color = "blue";
console.log(obj1.elements[0].style.color);
console.log(obj2.elements[0].style.color);
newDiv.style.color = "red";
console.log(obj1.elements[0].style.color);
console.log(obj2.elements[0].style.color);

Tips on connecting properties of two individual JavaScript objects

Answer №1

Answer №2

Similar questions

Utilizing Vue.js to display raw HTML content in elements.io table

How can one access a dynamically generated element in Angular without using querySelector?

What could be causing the PAGE CSS to malfunction?

Can the Browser width/document width be maintained when shrinking the browser window size?

I am experiencing difficulties with ng-animate not functioning properly on the Android WebView of my Samsung Galaxy S4

I'm having trouble with my React Router Dom Redirect path. Everything seems to be set up correctly, but for some reason, it's not directing my home page

I encountered an error message stating "Unexpected token {" while trying to import the module "express-fileupload"

Exploring the Array Functionality in React

What is the process for changing the value of a specific data point within an integer array in C++ by utilizing pointers?

Guide to importing external CSS styles into Angular 2 using the require method

What is the best way to add borders to the cities on interactive SVG maps?

retrieve JSON object from deferred response of AJAX request

Limiting the invocation of the listener method in f:ajax depending on the return value of onevent

Issue encountered with edges helper and a partly opaque object rendering

Update the div each time the MySQL table is refreshed

Developing a new class within a function

What sets apart calling an async function from within another async function? Are there any distinctions between the two methods?

Is it better to use Asynchronous or Synchronous request with XMLHttpRequest in the Firefox Extension for handling multiple requests

Working with PHP to transfer toggle switch information to JSON

Filter items by nested properties in ngRepeat