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);
    },
})
  • 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 – Brian Mansfield Apr 25 '17 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 '17 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 '17 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 '17 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]); – Caspar Harmer Apr 25 '17 at 21:30
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">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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