Oh my god. It's full of code!


Salesforce Lightning DataTable Query Flattener

So I was doing some playing around with the Salesforce Lightning Datatable component and while it does make displaying query data very easy, it isn’t super robust when it comes to handling parent and child records. Just to make life easier in the future I thought it might be nice to make a function which could take a query returned by a controller and ‘flatten’ it so that all the data was available to the data table since it cannot access nested arrays or objects. Of course the table itself doesn’t have a way to iterate over nested rows so the child array flatted function is not quite as useful (unless say you wanted to show a contacts most recent case or something). Anyway, hopefully this will save you some time from having to write wrapper classes or having to skip using the data table if you have parent or child nested data.

Apex Controller

public with sharing class ManageContactsController {

    public static list<Contact> getContacts()
        return [select firstname, name, lastname, email, phone, Owner.name, Owner.Profile.Name, (select id, subject from cases limit 1 order by createdDate desc ) from contact];

Lightning Controller

   init: function (component, event, helper) {
        component.set('v.mycolumns', [
                {label: 'Contact Name', fieldName: 'Name', type: 'text'},
                {label: 'Phone', fieldName: 'Phone', type: 'phone'},
                {label: 'Email', fieldName: 'Email', type: 'email'},
            	{label: 'Owner', fieldName: 'Owner_Name', type: 'text'},
            	{label: 'Most Recent Case', fieldName: 'Cases_0_Subject', type: 'text'}
        helper.getData(component, event, 'getContacts', 'mydata');


    flattenObject : function(propName, obj)
        var flatObject = [];
        for(var prop in obj)
            //if this property is an object, we need to flatten again
            var propIsNumber = isNaN(propName);
            var preAppend = propIsNumber ? propName+'_' : '';
            if(typeof obj[prop] == 'object')
                flatObject[preAppend+prop] = Object.assign(flatObject, this.flattenObject(preAppend+prop,obj[prop]) );

                flatObject[preAppend+prop] = obj[prop];
        return flatObject;
	flattenQueryResult : function(listOfObjects) {
        if(typeof listOfObjects != 'Array') 
        	var listOfObjects = [listOfObjects];
        console.log('List of Objects is now....');
        for(var i = 0; i < listOfObjects.length; i++)
            var obj = listOfObjects[i];
            for(var prop in obj)
                if(!obj.hasOwnProperty(prop)) continue;
                if(typeof obj[prop] == 'object' && typeof obj[prop] != 'Array')
					obj = Object.assign(obj, this.flattenObject(prop,obj[prop]));
                else if(typeof obj[prop] == 'Array')
                    for(var j = 0; j < obj[prop].length; j++)
                        obj[prop+'_'+j] = Object.assign(obj,this.flattenObject(prop,obj[prop]));
        return listOfObjects;
    getInfo : function(component, event, methodName, targetAttribute) {
        var action = component.get('c.'+methodName);
        action.setCallback(this, $A.getCallback(function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log('Got Raw Response for ' + methodName + ' ' + targetAttribute);
                var flattenedObject = this.flattenQueryResult(response.getReturnValue());
                component.set('v.'+targetAttribute, flattenedObject);
            } else if (state === "ERROR") {
                var errors = response.getError();

Component (Sorry my code highlighter didn’t like trying to parse this)

<aura:component controller=”ManageContactsController” implements=”forceCommunity:availableForAllPageTypes” access=”global”>
<aura:attribute name=”mydata” type=”Object”/>
<aura:attribute name=”mycolumns” type=”List”/>
<aura:handler name=”init” value=”{! this }” action=”{! c.init }”/>
<h3>Contacts (With Sharing Applied)</h3>
<lightning:datatable data=”{! v.mydata }”
columns=”{! v.mycolumns }”


Hope this helps!

3 responses

  1. Awesome. thanks

    I guess there are 2 tweaks which I’ve done:

    Call helper.getInfo(component, event, ‘getContacts’, ‘mydata’);

    and need to remove from helper otherwise it will show only one row:

    //if(typeof listOfObjects != ‘Array’)
    //var listOfObjects = [listOfObjects];


    May 28, 2018 at 2:53 am

    • Abby

      Thanks Wahib for the helpful tip 🙂

      December 28, 2018 at 7:20 pm

  2. Abby

    Good solution, it saved me some time, thanks!

    December 28, 2018 at 7:19 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s