{"id":3320,"date":"2021-12-12T19:20:23","date_gmt":"2021-12-12T18:20:23","guid":{"rendered":"https:\/\/texei.com\/?p=3320"},"modified":"2024-04-17T16:45:44","modified_gmt":"2024-04-17T14:45:44","slug":"day-12-manage-nested-object-in-your-lightning-web-components","status":"publish","type":"post","link":"https:\/\/texei.com\/en\/advices\/day-12-manage-nested-object-in-your-lightning-web-components\/","title":{"rendered":"Day 12\u00a0: Manage nested Object in your Lightning Web Components"},"content":{"rendered":"\r\n\r\n\r\n

What\u2019s new today?<\/h2>\r\n\r\n\r\n\r\n

Wrapper Class gives extra flexibility to Salesforce developers. A wrapper or container class is a data structure that contains different objects or collections of objects as its members. We all have used it in Visualforce pages, Lightning Aura Component and now in Lightning Web Component.<\/p>\r\n\r\n\r\n\r\n

These types of objects are generally nested objects<\/em><\/strong>.<\/p>\r\n\r\n\r\n\r\n

But, as you know, since winter 20, security for immutable @api properties has been increased for LWC. Each Object\u2019s elements are read-only to prevent modification so that the cache can\u2019t be corrupted by references. If you try it, you will see this error :<\/p>\r\n\r\n\r\n\r\n

[LWC component\u2019s @wire<\/a> target property or method threw an error during value provisioning. Original error:\u00a0
[Cannot assign to read only property \u2018Phone\u2019 of object \u2018#<Object>\u2019]]<\/span><\/pre>\r\n
To fix it, you have to copy the elements using the spread operator (\u2026)<\/strong>, or Object.assign<\/strong> into a new object but you will remove the read-only properties of all top-level<\/strong> elements. If you want to change a property of an object in an object in an object etc\u2026 (nested object<\/strong>) it is not so easy and you have to copy all the nested object\u2019s elements.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n
For every project I worked on, I got used to create in my LWC javascript utility lib the two functions<\/strong> below to simulate a custom Object.assign<\/strong> for nested objects<\/strong>.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\/**********************************************\r\n* Two functions to set a value of nested items\r\n* key string descriptor inside an Object.\r\n**********************************************\/\r\nconst setNestedKey = (obj, path, value) => {\r\n  if (path.length === 1) {\r\n    let key = path[0];\r\n    if (Array.isArray(obj)) {\r\n      let table = [...obj];\r\n      table.splice(key, 1, value);\r\n      obj = [...table];\r\n      return obj;\r\n    }\r\n    obj = { ...obj, [key]: value }\r\n    return obj;\r\n  }\r\n  return setNestedKey(obj[path[0]], path.slice(1), value)\r\n}\r\n\r\nconst assignObject = (obj, path, value) => {\r\n  \/\/ Protect against being something unexpected\r\n  obj = typeof obj === 'object' ? obj : {};\r\n  \/\/ Split the path into and array if its not one already\r\n  let keys = Array.isArray(path) ? path : path.split('.');\r\n  let newObj = setNestedKey(obj, keys, value);\r\n  if (keys.length === 1) {\r\n    return newObj;\r\n  }\r\n  keys.pop();\r\n  return assignObject(obj, keys, newObj);\r\n}\r\n\/**********************************************\/<\/pre>\r\n\r\n\r\n\r\n
Let me show you how to use them<\/h2>\r\n<\/div>\r\n\r\n\r\n\r\n
For example, if you have this nested object<\/strong> below :<\/p>\r\n\r\n\r\n\r\n
let myAccounts = [\r\n  {\r\n    name : 'account name 1',\r\n    contact : [\r\n      {\r\n        firstName : 'first name 1',\r\n        lastName : 'last name 1'\r\n      },\r\n      {\r\n        firstName : 'first name 2',\r\n        lastName : 'last name 2'\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    name : 'account name 2',\r\n    contact : [\r\n      {\r\n        firstName : 'first name 1',\r\n        lastName : 'last name 1'\r\n      },\r\n      {\r\n        firstName : 'first name 2',\r\n        lastName : 'last name 2'\r\n      }\r\n    ]\r\n  }\r\n];<\/pre>\r\n\r\n\r\n\r\n
to change the contact last name 2 of account name 2, you can use the assignObject<\/strong> function like this\u00a0:<\/p>\r\n\r\n\r\n\r\n
myAccounts = assignObject(myAccounts,'1.contact.1.lastName','new last name');<\/pre>\r\n\r\n\r\n\r\n
and you can also add a new contact like this :<\/p>\r\n\r\n\r\n\r\n
myAccounts = assignObject(myAccounts,'1.contact',\r\n  {\r\n    firstName : 'first name 3',\r\n    lastName : 'last name 3'\r\n  }\r\n);<\/pre>\r\n\r\n\r\n\r\n
I think it is very useful<\/strong> and hope you will like these utility functions!<\/p>\r\n\r\n\r\n\r\n
You can learn more about LWC properties security here\u00a0:<\/p>\r\n\r\n\r\n\r\n