Lightning Component: How do I pass a list from Apex to a JavaScript controller and assign record fields to variables?

Question

Hello I am creating a lightning component. I have a list of accounts obtained by a query in an apex class. I want to send this list to an array in a javascript controller that will let me assign the record values to variables

Apex:

public with sharing class AccountController 
{
    @AuraEnabled
    public static List<Account> getAccounts() 
    {
        List<Account> Accounts =  [SELECT Id, Name FROM Account];
        return Accounts;
    }
}

JavaScript controller:

doInit: function(component, event, helper) 
{
    ///Obtain account record list from Apex SOQL and pass it to an array.
    //var records = [] ???
    //This list is what will be passed to lightning component when function ends.
    var newItems=[];

    //Loop through records array and create item list using record field values.
    for (var i=0; i< records.length; i++)
    {
        var record = records[i];
        var Item = {title: record.name, id: record.id, status: "Unassigned"};
        newItems.push(Item);
    }  
    //Pass items into component
    component.set("v.allItems", newItems);
},

Answer 1

You can do as follows:-

var action = component.get("c.getAccounts");
action.setCallback(this, function(response){
    var state = response.getState();
    if(state === 'SUCCESS'){
        var res = response.getReturnValue();
        for(var i = 0; i < res.length; i++){
            //set the values here
        }
    }
}

What I am doing here is:- Calling the apex method and storing the response value in a variable. I have run a for loop to iterate through the list. If you have an attribute of type List in Component then you can directly set the values to that attribute.

Like this:- component.set("v.lstRecord",response.getReturnValue());

Answer 2

You start it from your component by declaring an array which will host your returned data from Apex. So you need to have a variable as something below on your component.

<aura:attribute name="myAccountList" type="Account[] />

Now in your JS, when you have fetched the List<Account> from Apex, you just use to set that value on the attribute you declared on the component.

var action = cmp.get("c.getAccounts");
action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var myAccountsFromServer = response.getReturnValue();
            // here's where you set the list of accounts that you received 
            // from server and setting that in component
            component.set("v.myAccountList", myAccountsFromServer);
            ....
         }
}

So when your JS function ends, you have the list of records back from server on the component.

Now in your component, to display the values that you receive, you just iterate over the attribute, something as below:

  <aura:iteration items="myAccountList" var="acct">
      {!acct.Id} -- this gives you the Id of the record
      {!acct.Name} -- this gives you the Name of the record
  </aura:iteration>
</aura:component>