JavaScript Proxies: no activation of 'set' when making changes to objects within an array

Question

JavaScript Proxies: no activation of 'set' when making changes to objects within an array

I am working with an array that is filled with objects

let objectArray = [{
  id: 1,
  name: "John"
}, {
  id: 2,
  name: "Bill"
}, {
  id: 3,
  name: "Mike"
}];

Next, I create a proxy with a set handler using my array as the target

let proxy = new Proxy(objectArray, {
  set: function(target, property, value) {
    //Handle the set action
  })
})

When I try to use forEach on the proxy:

proxy.forEach((element) => {
  element.name = "updated value";
});

The set trap in my proxy does not trigger, even though array manipulation methods like p.push() do.

Which trap should I use in this scenario?

javascript arrays es6-proxy

Answer 1

Answer №1

To modify objects, it is necessary to create a proxy for each object. For instance, you can use array mapping to wrap each object with a proxy:

const modifiedObjects = array.map(obj => new Proxy(obj, {
  set: function(target, prop, val, receiver) {
    console.log(target, prop, val, receiver);
    // Perform actions here
  }
}));

modifiedObjects.forEach(obj => {
    obj.property = "new value";
});

Answer 2

To modify objects, it is necessary to create a proxy for each object. For instance, you can use array mapping to wrap each object with a proxy:

const modifiedObjects = array.map(obj => new Proxy(obj, {
  set: function(target, prop, val, receiver) {
    console.log(target, prop, val, receiver);
    // Perform actions here
  }
}));

modifiedObjects.forEach(obj => {
    obj.property = "new value";
});

JavaScript Proxies: no activation of 'set' when making changes to objects within an array

Answer №1

Similar questions

Using async method in controller with NestJS Interceptor

Streaming the request body in NodeJS using ExpressJS without buffering

Constructing a Primeng MessageService causes a blank webpage to appear

AngularJS making a HttpPost request resulting in a 500-Internal Server Error

Displaying selected checkbox values in a URL with parameters using PHP and JavaScript

Bring in a collection of classes of various types from one TypeScript file to another

Implementing a hamburger menu across various webpages

Building a React Typescript service with axios functionality

retrieve Angular data across components using Input

Utilize Vue.js to easily upload images alongside form input fields

Issue with React occurring when attempting to delete an input component

What is the process for inserting or removing a row with Javascript?

detecting key presses on documents using javascript

Combine a string and integer in JavaScript without using quotation marks between them

Unbinding or undoing an 'onclick' event when another 'onclick' event is triggered

Attention: React is unable to identify the `pId` property on a DOM element

The error message "Error: cannot read property ‘setDirtyAttribute’ of null" may be encountered when attempting to use the method YourModel.create({...}) in ember-typescript-cli

Delete a particular table while utilizing $.fn.DataTable.tables()

When using the `Document.write()` method, an error is returned stating, "Uncaught TypeError: Cannot read property 'document' of null"

"I am trying to figure out how to set a link to an image using JavaScript. Can someone help me