What is the best way to update a deeply nested array of objects?

Question

What is the best way to update a deeply nested array of objects?

I have an array of objects with nested data that includes product, task, instrument details, and assets. I am attempting to locate a specific instrument by supplier ID and modify its asset values based on a given number.

const data = [
  {
    // Data for the first product...
  },
  {
    // Data for the second product...
  }
];

The goal is to update the assets of the selected instrument in each product entry by multiplying all asset values by a specified number. However, my current function is throwing an error:

Uncaught TypeError: Cannot assign to read only property 'current' of object '#'

How can I resolve this issue and successfully update the data as intended?

javascript arrays json typescript

Answer 1

Answer №1

It is essential to ensure that the map function returns a new object of type instrumentDetail instead of modifying the existing object.

(instrumentDetail: any) => {
  const assets = instrumentDetail.instrument.supplier.id === supplierInstrumentId
    ? Object.fromEntries(
      Object.entries(instrumentDetail.assets).map(([k, v]) => [k, v + 5])
    )
    :
    instrumentDetail.assets;
    
  return {
    ...instrumentDetail,
    assets
  };
}

Answer 2

It is essential to ensure that the map function returns a new object of type instrumentDetail instead of modifying the existing object.

(instrumentDetail: any) => {
  const assets = instrumentDetail.instrument.supplier.id === supplierInstrumentId
    ? Object.fromEntries(
      Object.entries(instrumentDetail.assets).map(([k, v]) => [k, v + 5])
    )
    :
    instrumentDetail.assets;
    
  return {
    ...instrumentDetail,
    assets
  };
}

Answer 3

Answer №2

The issue with your product map not returning is causing the undefined error to occur. Interestingly, I did not encounter the TypeScript error you mentioned earlier. This adjustment should maintain the array in the desired state.

function updateProductArray(productsArr, supplierInstrumentId) {
  return productsArr.map((product) => {
    product.instrumentDetails.map((instrumentDetail) => {
      if (instrumentDetail.instrument.supplier.id === supplierInstrumentId) {
        instrumentDetail.assets.current += 5;
        instrumentDetail.assets.fixed = instrumentDetail.assets.fixed + 5;
        instrumentDetail.assets.financial = instrumentDetail.assets.financial + 5;
        instrumentDetail.assets.cash = instrumentDetail.assets.cash + 5;
        return instrumentDetail;
      }
    });
    return product;
  });
}

Answer 4

The issue with your product map not returning is causing the undefined error to occur. Interestingly, I did not encounter the TypeScript error you mentioned earlier. This adjustment should maintain the array in the desired state.

function updateProductArray(productsArr, supplierInstrumentId) {
  return productsArr.map((product) => {
    product.instrumentDetails.map((instrumentDetail) => {
      if (instrumentDetail.instrument.supplier.id === supplierInstrumentId) {
        instrumentDetail.assets.current += 5;
        instrumentDetail.assets.fixed = instrumentDetail.assets.fixed + 5;
        instrumentDetail.assets.financial = instrumentDetail.assets.financial + 5;
        instrumentDetail.assets.cash = instrumentDetail.assets.cash + 5;
        return instrumentDetail;
      }
    });
    return product;
  });
}

What is the best way to update a deeply nested array of objects?

Answer №1

Answer №2

Similar questions

What is the best way to play a video from a certain time point in a React application?

Is there a way to determine if a specific string matches a value within an object?

I implemented progress bars in Angular 2 that have changing maximum values. The service updates the maximum value for each bar dynamically. Currently, the progress bars are functioning at 100% capacity

What is the best way to generate a multi-dimensional array filled with random integers and display it using a custom function?

Guide on creating a readUInt16BE function in a Node.js environment

Is it possible to consolidate React and React-DOM into a unified library instead of having them separate?

Error in React Native Typescript: The type 'string' cannot be assigned to the type '"solid" | "clear" | "outline"'. (Error code: ts(2322))

Unable to modify translation values in an existing ngx-translate object

When the child of li is clicked instead

Collaborating and monitoring data between controllers

Can auto-import be configured in WebStorm without using double dots?

Is it possible to invoke a component's function within the click function of a Chartjs chart?

What is the process for using dojo to load content?

Having trouble understanding why the other parts of my header are not displaying

Margins are added to cards on the right side

Ajax alert: The index 'id' is not defined

Prevent data loss on webpage refresh by using Angular's local storage feature

Optimal DynamoDB Configuration for Effective Implementation

The loading on the Express endpoint does not cease, despite configuring the response status (Encountering problems with Multer and Express)

Converting a nested object into JSON using Django serialization