JSON parsing and aura iteration in salesforce Lightning

Question

Below is the link of format

JSON example

I am trying to bind the data which is there in results-> items using aura:iteration. Here is my code for that.

<aura:iteration items="{!v.newassets.result.item}" var="item" start="1">
    <aura:renderIf isTrue="{!item.id!=null}">
        <li class="slds-truncate slds-list__item">{!item.id} : {!item.name}</li>
    </aura:renderIf>
</aura:iteration>

var action = component.get("c.XXXXXXXXXXXX");
action.setParams({
    "userid": '###'
});
action.setCallback(this, function(response) {
    var state = response.getState();
    if (state === "SUCCESS") 
    {
        var data = response.getReturnValue();
        component.set("v.newassets");
    }
});
$A.enqueueAction(action);

I am using aura enabled methods to get the data whose return type is JSONParser.

My api calls and response is coming right. I have checked that using the debug logs and I can see the data coming.

When I change the datatype from JSONParser to String and debug the helper js I can see the data in string format which I don't want. It was just to check whether the data in coming back from the Apex class.

But when the return type is JSONParser the data is not binding. I know I am not doing something right.

Answer 1

If your Apex class returns the Object in String format, then You Just do JSON.parse("Your_return_String") to get as an Object.

EDIT: You have not set Attribute value to 'newassets'.component.set('v.newassets')

Example code working fine to me.

Component:

<aura:component >
    <aura:attribute name="obj" type="Map"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:iteration items="{!v.obj.result.item}" var="item" start="1">
        <aura:if isTrue="{!item.id!=null}">
            <li class="slds-truncate slds-list__item">{!item.id} : {!item.name}</li>
        </aura:if>
    </aura:iteration> 
</aura:component>

Controller:

({
    init: function(component){
        var obj = {
            "status": 0,
            "result": {
                "new": 7,
                "item": [
                    {
                        "id": 21022,
                        "name": "Print1"
                    } ,
                    {
                        "id": 210223,
                        "name": "Print12"
                    } 
                ]

            }
        } 

    component.set('v.obj', obj);
    }
})

Check this Out.