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.

Answer 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);