Lightning Tree Grid LWC Render issue

Question

When I assign hardcoded Javascript JSON in LWC then the Tree Grid gets rendered.

const items = [{label:"Premier League",name:"Premier League",type:"League",treeIcon:'custom:custom48',_children:[],expanded:false,},
{label:"Bundesliga",name:"Bundesliga",type:"League",treeIcon:'custom:custom48',_children:[],expanded:false,},
{label:"La Liga",name:"La Liga",type:"League",treeIcon:'custom:custom48',_children:[],expanded:false,},
{label:"Serie League",name:"Serie League",type:"League",treeIcon:'custom:custom48',_children:[],expanded:false,},
{label:"Major League Soccer",name:"Major League Soccer",type:"League",treeIcon:'custom:custom48',_children:[],expanded:false,}]

When I store this same JSON in database field, retrieve it & assign it dynamically On Load then Tree Grid doesn't get rendered.

JS -
@track treeList;
@wire(getRecord, { recordId: 'a0h6F00000RcvAqQAJ', fields: FIELDS })
    wiredRecord({ data }) {
       if (data) {
            window.console.log('On Load Data ::: ' + JSON.stringify(data.fields.Hierarchy_Structure__c.value));
            let dat = data.fields.Hierarchy_Structure__c.value;
            let tree = dat.replace(/\\/g, '');
            window.console.log('On Load Tree List ::: ' + tree);
            this.treeList = tree;   // **I pass treeList as data to Lightning Tree Grid**
        }
    }


HTML -
  <lightning-tree-grid 
     key-field="name"
     columns={columns} 
     data={treeList}
  </lightning-tree-grid>

No error is shown when component gets loaded. I just am not able to understand what is the problem here.

i do not see any error handling in your code, you should probably start with that, also, as a good practice, you might want to youse conditional rendering in your tempalte(s), this will allow you to better understand why something might not be rendering. — glls
– glls, Commented Dec 12, 2020 at 15:56
@gls Have added in my code error handling....Just havent diaplayed it here — Mohit K
– Mohit K, Commented Dec 12, 2020 at 18:33

sfdcfox · Accepted Answer · 2020-12-12 19:29:06Z

1

If you've got JSON in this field, it's not working because you didn't actually deserialize it:

// I am a "string" value
let tree = dat.replace(/\\/g, '');
// But this needs to be a JavaScript "object".
this.treeList = tree;

The replacement you're trying to do is probably a red herring; I wouldn't recommend trying to do that without understanding the implications. Instead, deserialize the value directly without any attempt to manipulate it:

this.treeList = JSON.parse(dat);

answered Dec 12, 2020 at 19:29

sfdcfox

1

Actually I was getting \" in Json structure. So i used replace() to remove it. Thank you for your response. Understood now & tree grid is getting populated now.

Mohit K
– Mohit K

2020-12-12 19:40:17 +00:00
Commented Dec 12, 2020 at 19:40
@MohitKulkarni Then something is wrong with the JSON (double-encoded?) You should not manually remove escapes, because they are used when there are quotes in a string.

sfdcfox
– sfdcfox

2020-12-12 20:01:25 +00:00
Commented Dec 12, 2020 at 20:01
I am storing JSON in Text area....Maybe thats why \" are getting appended while retreiving?

Mohit K
– Mohit K

2020-12-13 05:45:40 +00:00
Commented Dec 13, 2020 at 5:45

Add a comment |

Stack Exchange Network

Lightning Tree Grid LWC Render issue

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Lightning Tree Grid LWC Render issue

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions