Identifying problems within a JavaScript assembly

Question

Identifying problems within a JavaScript assembly

I am currently facing a challenge with a reference issue in my JavaScript collection.

You can take a look at the plunker to see what I mean -> plunker

The problem arises when I execute this code snippet:

approverSteps[0].loadedApprovers.push({prop1: 'test'});

As a consequence, the loadedApprovers property of the second element in the approverSteps collection (approverSteps1) also gets updated. It seems to be a reference issue; do you have any suggestions on how to resolve it?

Thank you very much for your help in advance.

javascript arrays

Answer 1

Answer №1

The loadedApprovers array for all items points to a single empty array.

const approvalStepDefault = {
  loadedApprovers: [] // this array remains the same reference
};

Remember, arrays are passed by reference as well (since they are objects).

Give this a shot:

// you can skip using approvalStepDefault

let data = {
    steps: [{id: '01'},{id: '02'}]
};

let approverSteps = (data.steps || []).map(item => {
    const obj =  Object.assign({}, item); // make a copy of the item to keep the original intact (delete this line if not needed)
    obj.loadedApprovers = [];             // create a new array for each object
    return obj;
});

approverSteps[0].loadedApprovers.push({prop1: 'test'});
console.log(approverSteps);

Answer 2

The loadedApprovers array for all items points to a single empty array.

const approvalStepDefault = {
  loadedApprovers: [] // this array remains the same reference
};

Remember, arrays are passed by reference as well (since they are objects).

Give this a shot:

// you can skip using approvalStepDefault

let data = {
    steps: [{id: '01'},{id: '02'}]
};

let approverSteps = (data.steps || []).map(item => {
    const obj =  Object.assign({}, item); // make a copy of the item to keep the original intact (delete this line if not needed)
    obj.loadedApprovers = [];             // create a new array for each object
    return obj;
});

approverSteps[0].loadedApprovers.push({prop1: 'test'});
console.log(approverSteps);

Identifying problems within a JavaScript assembly

Answer №1

Similar questions

Access navigation through Google Maps on an Android device directly from the website

Sending the user to their destination

Deactivate a particular function key with the help of jQuery

What is the best way to send a continuous stream of data in Express?

Trouble activating header checkbox on initial click

Store the advertisement click into the database utilizing PHP, subsequently access the provided hyperlink

Vue component failing to re-render after data modification

Issue with using async await in map function: async function may not complete before moving on to the next item in the

What is the best way to insert a new record into a JSON file using AngularJS?

automatically changing radio button selection based on dropdown choice

Include the image source in the array

Capturing HTTP requests using JavaScript

send the value from the input field to the designated button - link the two buttons

Can a static text be displayed randomly using Javascript?

What could be the reason behind the malfunction of this jQuery post request?

Tips for removing the current item from a list by clicking on a close icon of the same class name

When inside a function declaration, io.socket is not defined, but it is defined outside of

Accessing store state in axios plugin with Nuxt.js

Toggling the visibility of divs in a dynamic layout

Encountering unexpected fetch requests to JSON files when using getStaticProps/getStaticPaths