{"id":6128,"date":"2022-10-10T04:16:36","date_gmt":"2022-10-10T04:16:36","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=6128"},"modified":"2022-10-10T06:10:17","modified_gmt":"2022-10-10T06:10:17","slug":"lwc-how-to-render-changes-in-a-nested-array","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/","title":{"rendered":"LWC: How to render changes in a nested array"},"content":{"rendered":"

Changes in nested arrays don\u2019t render simply in LWC<\/a> components even if you add the @track annotation with it. So to achieve this you will have to follow either of the 2 approaches i.e. shallow cloning or deep cloning. Here I am going to explain the shallow cloning approach in which the original object is copied into a new reference object with a new memory address by an assignment operator which has the exact values of the original object and if there is further reference to any object then only the address is copied so if there is any change to the reference object it also changes to the original object. Let’s take an example to make things more clear.<\/p>\n

var mainArray = [];
\nmainArray .push({
\n'Id' : 1,
\n'index' : 0,
\n\u2018schoolName' : 'abc international school',
\n\u2018class\u2019: \u2018five\u2019
\n});<\/code><\/p>\n

So now if you create a shallow copy of the mainArray and update the id key value it will get updated in the original array also like
\nlet innerData = [...this.mainArray];
\ninnerData[0][\u2018Id\u2019] = 5;
\nconsole.log(\u2018mainArray \u2018 + mainArray );<\/code><\/p>\n

The output will be :<\/strong><\/p>\n

mainArray [{'Id' : 5,'index' : 0,\u2018schoolName' : 'abc international school',\u2018class\u2019: \u2018five\u2019}]<\/code><\/p>\n

As the shallow copy is created only of the mainArray which means only the mainArray has got a new address but the inner object in the new variable i.e. innerData is still referencing the address as of mainArray. So both the new variable(InnerData) and mainArray will show the same output.<\/p>\n

If you will update a simple key of the mainArray then only the new variable will show the changes like<\/p>\n

innerData[0] = 3;<\/em><\/strong><\/p>\n

So now if you console the \u2018innerData\u2019 variable it will show [3] as the output but the mainArray will display the same object as defined.
\nNow let me explain to you the issue I faced working in an LWC component. I took an array inside the main array like :
\nvar innerArray = [];
\ninnerArray .push({
\n'Id' : 1,
\n'index' : 0,
\n\u2018name' : 'abc',
\n'rollno' : 2,
\n'dateofbirth' : '1\/1\/1987'
\n});
\ninnerArray .push({
\n'Id' : 2,
\n'index' : 1,
\n\u2018name' : def,
\n'rollno' : 3,
\n'dateofbirth' : '1\/7\/1987'
\n});
\nAnd then assigned the innerArray to mainArray.
\nvar mainArray = [];
\nmainArray .push({
\n'Id' : 1,
\n'index' : 0,
\n\u2018schoolName' : 'abc international school',
\n\u2018class\u2019: \u2018five\u2019,
\n\u2018students\u2019: innerArray
\n});<\/code><\/p>\n

Now when I tried to update the name of the student to def it didn\u2019t get reflected in the view, so I researched and found that a shallow copy has to be made for the changes to get reflected. So for that, I created one in which I created a shallow copy of the \u2018students\u2019 key of the mainArray. To do that I wrote the following code:<\/p>\n

let innerData = [...this.mainArray[0].students];
\ninnerData[1] = { ...innerData[1], name: \u2018defg\u2019 };<\/code><\/p>\n

The \u2026 will copy the array into the new variable and then I gave the key of the data I wanted to update and then assigned the shallow copy variable to the mainArray desired key like this<\/p>\n

mainArray[0].students = innerData;<\/code><\/p>\n

And you are ready now.<\/p>\n

If you don\u2019t make the assignment back then the \u2018innerData\u2019 will show the name as \u2018defg\u2019 but the mainArray will still show \u2018def\u2019 as the shallow copy is created of the \u2018students\u2019 key and the mainArray doesn\u2019t have any information about it. So to inform the mainArray about the changes the reassignment of the student’s key has to be done.<\/p>\n

In the same way, you can alter any other value of the student’s key and assign it to mainArray to reflect your changes.<\/p>\n

If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP Certification Exams<\/a> are offered by StudySection along with other programming certification exams. <\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Changes in nested arrays don\u2019t render simply in LWC components even if you add the @track annotation with it. So<\/p>\n","protected":false},"author":1,"featured_media":6129,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[518,721],"acf":[],"yoast_head":"\nLWC: How to render changes in a nested array - SS Blog<\/title>\n<meta name=\"description\" content=\"Changes in the nested array don\u2019t render simply in LWC components, even if you add the @track annotation with it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LWC: How to render changes in a nested array - SS Blog\" \/>\n<meta property=\"og:description\" content=\"Changes in the nested array don\u2019t render simply in LWC components, even if you add the @track annotation with it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-10T04:16:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-10T06:10:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/10\/nested-array.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"LWC: How to render changes in a nested array\",\"datePublished\":\"2022-10-10T04:16:36+00:00\",\"dateModified\":\"2022-10-10T06:10:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/\"},\"wordCount\":524,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Array\",\"LWC\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/\",\"url\":\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/\",\"name\":\"LWC: How to render changes in a nested array - SS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2022-10-10T04:16:36+00:00\",\"dateModified\":\"2022-10-10T06:10:17+00:00\",\"description\":\"Changes in the nested array don\u2019t render simply in LWC components, even if you add the @track annotation with it.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"LWC: How to render changes in a nested array\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"LWC: How to render changes in a nested array - SS Blog","description":"Changes in the nested array don\u2019t render simply in LWC components, even if you add the @track annotation with it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/","og_locale":"en_US","og_type":"article","og_title":"LWC: How to render changes in a nested array - SS Blog","og_description":"Changes in the nested array don\u2019t render simply in LWC components, even if you add the @track annotation with it.","og_url":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2022-10-10T04:16:36+00:00","article_modified_time":"2022-10-10T06:10:17+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/10\/nested-array.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"LWC: How to render changes in a nested array","datePublished":"2022-10-10T04:16:36+00:00","dateModified":"2022-10-10T06:10:17+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/"},"wordCount":524,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Array","LWC"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/","url":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/","name":"LWC: How to render changes in a nested array - SS Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2022-10-10T04:16:36+00:00","dateModified":"2022-10-10T06:10:17+00:00","description":"Changes in the nested array don\u2019t render simply in LWC components, even if you add the @track annotation with it.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/lwc-how-to-render-changes-in-a-nested-array\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"LWC: How to render changes in a nested array"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":1707,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6128"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=6128"}],"version-history":[{"count":3,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6128\/revisions"}],"predecessor-version":[{"id":6132,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6128\/revisions\/6132"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/6129"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=6128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=6128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=6128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}