4

I am having fits with lightning aura iteration, the response looks corerect, it doesnt do anything just puts in a blank row, no errors

I've tried changing apex class variable types, uppercasing the iteration, having zero luck

here is my lightning component

<aura:attribute name="response" type="Map"/>
<aura:attribute name="ListOfGifts" type="String[]"/>  


<div class="slds">
  <div class="slds-box" aura:id="main">
    <div aura:id="panelList">
      <header>
        <h2 class="slds-text-heading--small slds-m-bottom--small">Giving Summary from JSON</h2>
      </header>
        <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover">
            <tr>
                <th class="slds-text-heading--label">ID</th> 
                <th class="slds-text-heading--label">receipt date</th>
                <th class="slds-text-heading--label">associated desc</th>
                <th class="slds-text-heading--label">main receipt</th>
                <th class="slds-text-heading--label">transation group</th> 
                <th class="slds-text-heading--label">extended amount</th> 
                <th class="slds-text-heading--label">recent trans number</th> 
            </tr>

            <aura:iteration items="{!v.ListOfGifts}" var="gifts">
                <tr> 
                    <td>{!gifts.id_number}</td>
                    <td>{!gifts.RECEIPT_DATE}</td>       
                    <td>{!gifts.ASSOCIATED_DESC}</td>
                    <td>{!gifts.MAIN_RECEIPT_NUMBER}</td>
                    <td>{!gifts.TRANSATION_GROUP_3}</td>       
                    <td>{!gifts.EXTENDED_AMOUNT}</td>
                    <td>{!gifts.RECENT_TRANS_NUM}</td>

                </tr>
            </aura:iteration>
        </table>
      </div>
    </div>
</div>
</aura:component>

i have the following http callout apex class

    public class httpCallOutCtrl {
    // Pass in the endpoint to be used using the string url
    @AuraEnabled

    public static Map < String, Object > getCalloutResponseContents(String url) {

        // Instantiate a new http object
        Http h = new Http();

        // Instantiate a new HTTP request, specify the method (GET) as well as the endpoint
        HttpRequest req = new HttpRequest();

        // dummy data 

        req.setEndpoint(url);
        req.setMethod('GET');

        // Send the request, and return a response
        HttpResponse res = h.send(req);
        System.debug('response:--> ' + res.getBody());

        // Deserialize the JSON string into collections of primitive data types.
        Map < String,
        Object > resultsMap = (Map < String, Object > ) JSON.deserializeUntyped(res.getBody());
        system.debug('resultsMap-->' + resultsMap);
        return resultsMap;

    }

}

which returns the following JSON encased in a return value

{
    "gifts": [{
        "id_number": "0000729789",
        "receipt_date": "2016-04-28 00:00:00.000",
        "associated_desc": "Primary",
        "main_receipt_number": "0004172594",
        "transation_group_3": "Outright Gift",
        "extended_amount": "10.00",
        "recent_trans_num": 1
    }, {
        "id_number": "0000729789",
        "receipt_date": "2015-05-15 00:00:00.000",
        "associated_desc": "Primary",
        "main_receipt_number": "0004044990",
        "transation_group_3": "Outright Gift",
        "extended_amount": "10.00",
        "recent_trans_num": 2
    }, {
        "id_number": "0000729789",
        "receipt_date": "2009-04-02 00:00:00.000",
        "associated_desc": "Beneficiary",
        "main_receipt_number": "0003312553",
        "transation_group_3": "Outright Gift",
        "extended_amount": "210.00",
        "recent_trans_num": 3
    }]
}

my controller.js

({
    getResponse: function(component) {
        // create a server side action.       
        var action = component.get("c.getCalloutResponseContents");

        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {

                component.set("v.response", response.getReturnValue());


                var getAllGifts = component.get("v.response")['gifts'];
                var GiftList = [];

                for (var key in getAllGifts) {
                    // push all rates with there Name in CurrencyList variable.        
                    GiftList.push(key + ' = ' + getAllGifts[key]);   
                }

                component.set("v.ListOfGifts", GiftList);
                console.log(GiftList);
            }
        });

        $A.enqueueAction(action);
    },
})
8
  • Where is your aura:attribute? I am not sure you can bind the values from your controller directly to the aura:iteration without declaring an aura:attribute Apr 25, 2017 at 18:43
  • Where are you calling the client side controller getResponse method? do you see something in your console? does your console.log(GiftList); show?
    – Rao
    Apr 25, 2017 at 19:02
  • Also, I believe that the properties are case sensitive and your response is lower case yet in your iteration is upper case. In lightning components the majority of the time case matters. I believe it is so here as well but I cannot keep the exceptions in my head so I always assume case matters when something is not working. What does the debug look like in the controller from the callback response
    – Eric
    Apr 25, 2017 at 19:06
  • The aura attributes are at the top of the component. The console log does log but it's object, object, and I agree Eric but the first loop Val is lowercase so that should work
    – Jay Rizzi
    Apr 25, 2017 at 19:16
  • 2
    You are putting a string into your array. Hence it doesn't work. Because you have an array of strings, when you try to access object that should be there, nothing happens. Try: GiftList.push(getAllGifts[key]); Apr 25, 2017 at 21:30

1 Answer 1

1

This has been fixed; I have no idea why the original didn't work.

I changed my controller to

({

    getResponse : function(component) {

        var action = component.get("c.getCalloutResponseContents");
        action.setCallback(this, function(response) { 
              var state = response.getState();
           if (state === "SUCCESS") {

               var returnValue =response.getReturnValue();
                component.set("v.response", returnValue );
           }
        });
        $A.enqueueAction(action);
    }
})

and my lightning component to use

   <aura:iteration items="{!v.response.gifts}" var="gifts">

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .