How do I get the Name to be displayed but not ID using Javascript in SlickGrid

Question

I have the following JSON coming from SOQL query

 {
"attributes":{
"type":"VTA__c",
"url":"/services/data/v49.0/sobjects/VTA__c/a142F0000018790QAA"
},
"Normalized_Vendor_Name__c":"001A00000187sazIAA",
"Id":"a142F0000018790QAA",
"Legacy_Vendor__c":"RICHMOND",
"Bandwidth__c":"DS1",
"Provisioning_System__c":"Orange",
"Vendor_Term__c":"18 - Month",
"State__c":"AK",
"Type_Indicator__c":"Standard",
"PNUM__c":1234,
"Normalized_Vendor_Name__r":{
"attributes":{
"type":"Account",
"url":"/services/data/v49.0/sobjects/Account/001A078626378987"
},
"Name":"NORTH ATLANTIC",
"Id":"001A00000656DHS232"
}
}

I am using a slickgrid to display columns. But when I refer Normalized_Vendor_Name__r.name in my column construction, I have no value displayed. Can some one help me display only the name?

id: "accessCarrierName", name: "Normalized Vendor Name", field: "Normalized_Vendor_Name__r.Name",  sortable: true, headerCssClass:"cssHeader",  cssClass: "cssEditableColumn", width:150, editor: Slick.Editors.SelectOption, options: accountList, asyncPostRender: HighLightErrorRow}

I am a bit new to Javascript. Any help would be appreciated

Answer 1

Hello I solved this issue by flattening the JSON and using Normalized_Vendor_Name__r.name to display the name.

JSON.flatten

I used this method when binding the data to flatten

let datacopy =JSON.parse(result);

if(datacopy instanceof Array){
for (var = idx; idx<datacopy.length; idx++){
      datacopy[idx].id = idx;
      //below I have flattened the datacopy which is the parsed JSON from my remote action 
      data.push(JSON.flatten(datacopy[idx]));
}

}

 

Answer 2

You will need a Custom Formatter to explode the data as a complex object and then show it in the UI, for example here is how I do it in my lib (my formatters are usually saved in a separate file formatters.js )

export const complexObjectFormatter = (row, cell, cellValue, columnDef, dataContext) => {
  if (!columnDef) {
    return '';
  }

  const columnParams = columnDef.params || {};
  const complexFieldLabel = columnParams && columnParams.complexFieldLabel || columnDef.field;

  if (columnDef.labelKey && dataContext.hasOwnProperty(complexFieldLabel)) {
    return dataContext[complexFieldLabel] && dataContext[complexFieldLabel][columnDef.labelKey];
  }

  // when complexFieldLabel includes the dot ".", we will do the split and get the value from the complex object
  // however we also need to make sure that the complex objet exist, else we'll return the cell value (original value)
  if (typeof complexFieldLabel === 'string' && complexFieldLabel.indexOf('.') > 0) {
    return complexFieldLabel.split('.').reduce((obj, i) => (obj && obj.hasOwnProperty(i) ? obj[i] : cellValue), dataContext);
  }
  return cellValue;
};

Then use it in your column definition

this.columnDefinitions = [
  {
    id: "accessCarrierName", name: "Normalized Vendor Name", field: "Normalized_Vendor_Name__r.Name",  
    formatter: complexObjectFormatter
}

My formatter also accept extra arguments that I can pass in the params property, they are optional but might be helpful. By default the formatter will explode with the dot notation, but the optional params can be to tell the formatter which field to use, for example

this.columnDefs = [
  { 
    id: 'username', field: 'user', 
    formatter: complexObjectFormatter
    params: { complexField: 'user.firstName' } // optionally tell the formatter which field to explode
  },
];

Note that this only for displaying the data, if you have Sorting, Filtering,... then you'll need to update it as well to exploded it just like the formatter did.