lightning tree grid issue with displaying grand child data from apex

Question

I have this below query . Where i am trying to display Opportunity name and products associated to it in a lightning tree-grid structure.

The issue i am facing is i am able to display opportunity name . But i am unable to display product name and family

 List < Opportunity > opps = [ SELECT Id, Name, StageName,
                ( SELECT Id, Product2.Name, Product2.Family FROM OpportunityLineItems )
                FROM Opportunity WHERE Id IN:  oppsIds];

HTML -

 <lightning-tree-grid hide-checkbox-column columns={gridColumns} data={gridData} key-field="Id">
        </lightning-tree-grid>

JS -

gridColumns = [{
        type: 'text',
        fieldName: 'Name',
        label: 'Opportunity Name'
    },
    {
        type: 'text',
        fieldName: 'StageName',
        label: 'Stage'
    },
    {
        type: 'text',
        fieldName: 'Product2.Name',
        label: 'ProductName'

    },
    {
        type: 'text',
        fieldName: 'Product2.Family',
        label: 'Product Family'

    }
    ];

wire method returning the data

 gridColumns = [{
    type: 'text',
    fieldName: 'Name',
    label: 'Opportunity Name'
},
{
    type: 'text',
    fieldName: 'StageName',
    label: 'Stage'
},
{
    type: 'text',
    fieldName: 'Product2.Name',
    label: 'Product Name'

},
{
    type: 'text',
    fieldName: 'Product2.Family',
    label: 'Product Family'

}
];
gridData
allRows
@api recordId
@wire(fetchOLIs, { contractId: '$recordId' })
olitreedata({ error, data }) {
    if ( data ) {
  
       // this.gridData = tempData;
        this.gridData = data.map((row) => {
            row = { ...row }; // copy row object
            const items = row.OpportunityLineItems; // Save items
            delete row.OpportunityLineItems; // remove from row
            row._children = items.map((item) => this.flattenObject(item)); // flatten item
            return row;
          });

    } else if ( error ) {
     


    }
}

flattenObject(object, result = {}, path = []) {
    for (const [key, value] of Object.entries(object)) {
      if (typeof value === "object") {
        flattenObject(value, result, [...path, key]);
      } else {
        result[`${path.join(".")}${path.length ? "." : ""}${key}`] = value;
      }
    }
    return result;
  }

Answer 1

The various lightning list items (e.g. treeGrid) do not automatically navigate objects. In other words, given the field name Product2.Family, treeGrid and datatable expect data that looks like this:

[ { 'Product2.Family': 'Software' } ]

But you have data that looks like this:

[ { Product2: { Family: 'Software' } } ]

You have to manually flatten those objects using a method like this:

function flattenObject(object, result = {}, path = []) {
  for (const [key, value] of Object.entries(object)) {
    if (typeof value === "object") {
      flattenObject(value, result, [...path, key]);
    } else {
      result[`${path.join(".")}${path.length ? "." : ""}${key}`] = value;
    }
  }
  return result;
}

Which you then use in your wire handler:

if (data) {
  this.allRows = data.map((row) => {
    row = { ...row }; // copy row object
    const items = row.OpportunityLineItems; // Save items
    delete row.OpportunityLineItems; // remove from row
    row._children = items.map((item) => flattenObject(item)); // flatten item
    return row;
  });
}