Today I have been attempting to make a lightning:tree that accurately reflects a nested list of custom objects, and it feels like I am most of the way there, but can't quite get the tree to actually display as I need.

On my back end server controller, I query my data and separate it into a List < List < CustomObject > > to resemble a hierarchy structure. I am then using the JSON.serializePretty() method to turn this List of Lists into a JSON string.

String reportingTreeJson = JSON.serializePretty(reportingTree);

This is then passed back through the client side controller and into my lightning component.

Once in the lightning component, however, I ran into trouble when attempting to create a tree using this line-

<lightning:tree items = "{!v.reportingTree}" header = "Roles"/>

I have confirmed that the JSON is being passed in properly, as when I insert a line alone in the component that displays the attribute like so-

{!v.reportingTree}

it does come out as a valid JSON array, confirmed with an online validator, that seems to represent the List structure as I intended. When I insert the component on a page though, the only thing that appears is the header containing the word "Roles". I can't seem to figure what I may be doing wrong here, as I was under the impression that it even if my representation of the data was wrong, it would still do a best effort to display the tree structure.

I am relatively new to using JSON, and only a bit more expirenced in created custom lightning components, so it is probable I am missing something simple on this, but my other concern is that I am pursuing a design strategy that is just not feasible given the salesforce tools. If anyone could help to confirm whether this should be a workable strategy or maybe point out what I have missed, it would be much apperciated.

Below is the JSON that is being loaded into the component and what is displayed when calling the component to display the entire reportingTree attribute-

[
    [{
        "attributes": {
            "type": "Position__c",
            "url": "/services/data/v44.0/sobjects/Position__c/a0wr0000000k23NAAQ"
        },
        "Id": "a0wr0000000k23NAAQ",
        "Name": "0",
        "User__c": "005t0000000ntkoAAA",
        "User__r": {
            "attributes": {
                "type": "User",
                "url": "/services/data/v44.0/sobjects/User/005t0000000ntkoAAA"
            },
            "Name": "John Carr",
            "Id": "005t0000000ntkoAAA"
        }
    }],
    [{
        "attributes": {
            "type": "Position__c",
            "url": "/services/data/v44.0/sobjects/Position__c/a0wr0000000k23SAAQ"
        },
        "Id": "a0wr0000000k23SAAQ",
        "Name": "1",
        "User__c": "005t0000001aKgiAAE",
        "Reports_To__c": "a0wr0000000k23NAAQ",
        "User__r": {
            "attributes": {
                "type": "User",
                "url": "/services/data/v44.0/sobjects/User/005t0000001aKgiAAE"
            },
            "Name": "Barry Bassinger",
            "Id": "005t0000001aKgiAAE"
        }
    }],
    [{
        "attributes": {
            "type": "Position__c",
            "url": "/services/data/v44.0/sobjects/Position__c/a0wr0000000k23XAAQ"
        },
        "Id": "a0wr0000000k23XAAQ",
        "Name": "2",
        "User__c": "005t0000001Zg4PAAS",
        "Reports_To__c": "a0wr0000000k23SAAQ",
        "User__r": {
            "attributes": {
                "type": "User",
                "url": "/services/data/v44.0/sobjects/User/005t0000001Zg4PAAS"
            },
            "Name": "Michael Scott",
            "Id": "005t0000001Zg4PAAS"
        }
    }],
    [{
        "attributes": {
            "type": "Position__c",
            "url": "/services/data/v44.0/sobjects/Position__c/a0wr0000000k28bAAA"
        },
        "Id": "a0wr0000000k28bAAA",
        "Name": "3",
        "User__c": "005r0000002FO6gAAG",
        "Reports_To__c": "a0wr0000000k23XAAQ",
        "User__r": {
            "attributes": {
                "type": "User",
                "url": "/services/data/v44.0/sobjects/User/005r0000002FO6gAAG"
            },
            "Name": "Sara Anderson",
            "Id": "005r0000002FO6gAAG"
        }
    }, {
        "attributes": {
            "type": "Position__c",
            "url": "/services/data/v44.0/sobjects/Position__c/a0wr0000000k2sHAAQ"
        },
        "Id": "a0wr0000000k2sHAAQ",
        "Name": "4",
        "User__c": "005t0000001ZvHVAA0",
        "Reports_To__c": "a0wr0000000k23XAAQ",
        "User__r": {
            "attributes": {
                "type": "User",
                "url": "/services/data/v44.0/sobjects/User/005t0000001ZvHVAA0"
            },
            "Name": "Lee Garry",
            "Id": "005t0000001ZvHVAA0"
        }
    }],
    [],
    []
]

Happy to upload further code upon request if it helps, but I think the real meat of the issue is in the component as I have been able to confirm the validity of the JSON and its presence there.

up vote 3 down vote accepted

It's not supposed to be JSON, but instead literal JavaScript objects. Use JSON.parse on the client-side and set your attribute to that, instead.

component.set("v.reportingTree", JSON.parse(result.getReturnValue());

This is also true for things like aura:iteration; you are expected to use literal objects, not JSON strings or anything else.

Also, see this gist for a demonstration on building the tree client-side if that's easier for you.

  • That explains quite a bit. Seems like I was misunderstanding how all this is supposed to fit together. Thank you for your help, I suspect this should all fit together a bit more smoothly with that in mind! – Frank Evers Sep 21 at 19:58

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.