#newBie doInit() method in Salesforce Lightning not loading value

Question

I am new to salesforce lightning and trying to learn it. I want to show an account information when the app is initialized. I have checked in the console, getting the value but its not displaying on the UI. Below is my code.

Component:-

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="acc" type="Account"/>
<div class="slds-grid">
    <div class="slds-col">{!v.acc.name}</div>
    <div class="slds-col">{!v.acc.Id}</div>
    <div class="slds-col">{!v.acc.Industry}</div>
</div>

Client Controller:-

({
  doInit : function(component, event, helper) {
         var action = component.get("c.retrieveAccount");
        console.log('in client side controller');
         action.setCallback(this,function(response){
         var state = response.getState();
         if(component.isValid() && state== "SUCCESS"){
             console.log('got response');

            component.set("v.acc",response.getReturnValue());
             console.log('response is:- '+response.getReturnValue());
             console.log('value of account '+JSON.stringify(component.get("v.acc")));
             console.log('--------'+JSON.stringify(response.getReturnValue()));
         }

        });
        $A.enqueueAction(action);

   },
 })

Apex controller:- GridAccountController

public class GridAccountController {

@AuraEnabled
public static Account retrieveAccount(){
    System.debug('retrieveAccount');
    return [SELECT Id,Name,Email__c,Industry,childCount__c,SLA__c FROM ACCOUNT LIMIT: 1];
}

}

Answer 1

Your query in the Apex class in not valid and is throwing an error:

[SELECT Id,Name,Email__c,Industry,childCount__c,SLA__c FROM ACCOUNT LIMIT: 1];

should be (No colon)

[SELECT Id,Name,Email__c,Industry,childCount__c,SLA__c FROM ACCOUNT LIMIT 1];

And you have an extra comma at the end of your init function which will invalidate the code

It may be that you did not post the exact code from your markup as you said you got value back which is not possible with the code you posted. You could use the below as a starting point and add in the rest of your stuff little by little. When it breaks you know what caused it.

I threw the following into my org and it works just fine:

Component

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="acc" type="Account"/>

<div class="slds-grid">
    <div class="slds-col">{!v.acc.name}</div>
    <div class="slds-col">{!v.acc.Id}</div>
    <div class="slds-col">{!v.acc.Industry}</div>
</div>

JS Controller

({
    doInit: function (component, event, helper) {
        var action = component.get("c.retrieveAccount");
        console.log('in client side controller');
        action.setCallback(this,function(response){
            var state = response.getState();
            if(component.isValid() && state== "SUCCESS"){
                console.log('got response');

                component.set("v.acc",response.getReturnValue());
                console.log('response is:- '+response.getReturnValue());
                console.log('value of account '+JSON.stringify(component.get("v.acc")));
                console.log('--------'+JSON.stringify(response.getReturnValue()));
            }

        });
        $A.enqueueAction(action);
    }
})

Apex Controller

public class myProblemController {

    @AuraEnabled
    public static Account retrieveAccount(){
        System.debug('retrieveAccount');
        return [SELECT Id,Name,Industry FROM ACCOUNT LIMIT 1];
    }

}