1

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.

2
  • 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
    Dec 12, 2020 at 15:56
  • @gls Have added in my code error handling....Just havent diaplayed it here
    – Mohit K
    Dec 12, 2020 at 18:33

1 Answer 1

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);
3
  • 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
    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
    Dec 12, 2020 at 20:01
  • I am storing JSON in Text area....Maybe thats why \" are getting appended while retreiving?
    – Mohit K
    Dec 13, 2020 at 5:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .