{"id":7157,"date":"2020-07-29T11:56:30","date_gmt":"2020-07-29T15:56:30","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=7157"},"modified":"2020-07-31T16:18:51","modified_gmt":"2020-07-31T20:18:51","slug":"how-to-show-content-of-proxy-object-in-lightning-web-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/how-to-show-content-of-proxy-object-in-lightning-web-component\/","title":{"rendered":"Fix Error “Cannot assign to read only property” and print Proxy Object of LWC"},"content":{"rendered":"\n

As its code-snippet<\/a> post, its going to be very short but frequently used.<\/p>\n\n\n\n

Salesforce decorator @track<\/a> is reactive , which means if value in JavaScript changes, equivalent HTML UI would also change. You don’t need to mark primitive data types as track, as its enabled by default for them. However for complex structure \/ object we need to mark variable as @track<\/a>.<\/p>\n\n\n\n

Whenever any JavaScript object marked as @track<\/a>, Salesforce wraps that object resulting in proxy object. If you try to print that on console, you would not be able to see its value.<\/p>\n\n\n\n

That being said, there is no change in way you access it, it’s exactly like any other Javascript object we use. So, if you want to see content of proxy object, just call below method and pass your proxy object.<\/p>\n\n\n

\n\/\/Get Javascript object equivalent to Proxy\n    proxyToObj(obj){\n        return JSON.parse(JSON.stringify(obj));\n    }\n<\/pre><\/div>\n\n\n
Another way is, just keep another variable without @track<\/a> decorator to see content. However problem would be – you need to make sure to keep it in sync every time content of original @track<\/a> object changes. <\/p>\n\n\n\n
Fixing error – Cannot assign to read only property<\/h3>\n\n\n\n
Above error occurs when we try to change public property on LWC marked as @api<\/strong><\/p>\n\n\n
\n@api someVar\n.... some code\n\nsomemethod(event){\n    \/\/error on below line - Cannot assign to read only property\n     someVar.isSelected = true;\n}\n<\/pre><\/div>\n\n\n
Above code block would throw an error as we are trying. to change property on object declared by @api <\/p>\n\n\n
\n@api someVar\n.... some code\n\nsomemethod(event){\n    \/\/clone @api variable using method we just created\n    let tmpObj = this.proxyToObj(someVar);\n     tmpObj.isSelected = true;\n    \/\/now assign this tmp variable back to original\n   someVar = tmpObj;\n}\n<\/pre><\/div>\n\n\n
To fix above error, use can do something like <\/p>\n","protected":false},"excerpt":{"rendered":"
Quick code snippet to read content of Proxy object in Lightning web component & resolve error Cannot assign to read only property<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[9],"tags":[471,462,464],"class_list":["post-7157","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-code-snippet","tag-lightning-web-component","tag-lwc"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":7140,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/using-custom-label-in-lightning-web-components-lwc\/","url_meta":{"origin":7157,"position":0},"title":"Using Custom Label in Lightning Web Components – LWC","author":"Jitendra","date":"April 4, 2020","format":false,"excerpt":"Quick Code Snippet on how to use custom label in Lightning Web Components - LWC","rel":"","context":"In "Lightning Web Components"","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6908,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/","url_meta":{"origin":7157,"position":1},"title":"Use Lightning Web Components in Flow","author":"Jitendra","date":"October 21, 2019","format":false,"excerpt":"Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)","rel":"","context":"In "Lightning Web Components"","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Using LWC in Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6880,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-current-user-id-in-salesforce\/","url_meta":{"origin":7157,"position":2},"title":"Get Current User Id in Salesforce","author":"Jitendra","date":"February 2, 2019","format":false,"excerpt":"How to get Current Logged in user Id in Apex, Visualforce, Lightning Component and Formula fields in Salesforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7072,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/share-javascript-code-in-lightning-web-component-to-read-url-parameters\/","url_meta":{"origin":7157,"position":3},"title":"Share JavaScript Code in Lightning Web Component to Read URL Parameters","author":"Jitendra","date":"May 4, 2020","format":false,"excerpt":"Building Reusable LWC Component to read query string from URL","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7587,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/scan-barcode-in-lwc-natively\/","url_meta":{"origin":7157,"position":4},"title":"Scan Barcode in LWC Natively","author":"Jitendra","date":"June 6, 2022","format":false,"excerpt":"Demo & Source code of using Barcode API in Salesforce LWC","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Barcode in LWC","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7058,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gravatar-reusable-lightning-web-component\/","url_meta":{"origin":7157,"position":5},"title":"Gravatar – Reusable Lightning Web Component","author":"Jitendra","date":"May 2, 2020","format":false,"excerpt":"Avoid asking your users to upload pictures - Use Globally Recognized Avatar , Reusable Lightning Web Component","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Gravatar - Reusable Lightning Web Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=7157"}],"version-history":[{"count":3,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7157\/revisions"}],"predecessor-version":[{"id":7164,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7157\/revisions\/7164"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=7157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=7157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=7157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}