How do I use a method from an Apex class on a lightning component?

Question

I created 3 classes (AllocationManager, AllocationInput & AllocationOutput) to manage my request to an API and it seems to return what I need just fine but now I'm having trouble using the return within Lightning. All classes can be find bellow.

Any ideas on how to use the response on lightning?

I tried to pass my AllocationManager as an Apex controller to my Lightning component js controller but I keep getting error saying that it can't find the method on it.

AllocationManager.cls

public class AllocationManager {
    String url = 'https://myapi.url';
    // Pass in the endpoint to be used using the string url
    @AuraEnabled
    public AllocationOutput getAllocationBreakdown() {

        String jsonstr = '{\"returnSecurityDetails\":\"true\",\"displayLevel\":\"1\",\"portfolios\":[{\"portfolioName\":\"Portfolio A\",\"cashBalance\":5000,\"holdings\":[{\"symbol\":\"IVV\",\"holdingValue\":50000},{\"symbol\":\"IWM\",\"holdingValue\":25000},{\"symbol\":\"VWO\",\"holdingValue\":10000},{\"symbol\":\"AAPL\",\"holdingValue\":5000}]},{\"portfolioName\":\"Portfolio B\",\"cashBalance\":5000,\"holdings\":[{\"symbol\":\"VIG\",\"holdingValue\":50000},{\"symbol\":\"VO\",\"holdingValue\":25000},{\"symbol\":\"VB\",\"holdingValue\":10000},{\"symbol\":\"EFA\",\"holdingValue\":5000}]}]}';
        AllocationInput obj = AllocationInput.parse(jsonstr);
        String allocInput = JSON.serialize(obj);
        //System.debug(allocInput);

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

        // Instantiate a new HTTP request, specify the method (POST) as well as the endpoint
        HttpRequest req = new HttpRequest();
        req.setHeader('Authorization', 'MY_CLIENT client_id=xxxxxx client_secret=xxxxxxxxxxxxxx');
        req.setHeader('Content-Type', 'application/json');
        req.setHeader('Accept','application/json');
        req.setEndpoint(url);
        req.setMethod('POST');
        req.setBody(allocInput);

        // Send the request, and return a response
        HttpResponse res = h.send(req);

        String allocOutput = res.getBody();
        //System.debug(allocOutput);
        AllocationOutput output = AllocationOutput.parse(allocOutput);
        return output;
    }
}

AllocationInput.cls

public class AllocationInput {

    public class Holdings {
        public String symbol;
        public Integer holdingValue;
    }

    public String returnSecurityDetails;
    public String displayLevel;
    public List<Portfolios> portfolios;

    public class Portfolios {
        public String portfolioName;
        public Integer cashBalance;
        public List<Holdings> holdings;
    }


    public static AllocationInput parse(String json) {
        return (AllocationInput) System.JSON.deserialize(json, AllocationInput.class);
    }
}

AllocationOutput.cls

public class AllocationOutput {

    public class PortfolioStyles {
        public String styleID;
        public String styleName;
        public String styleAllocation;
        public String styleValue;
    }

    public String apiVersion;
    public String timestamp;
    public String tenantName;
    public List<Portfolios> portfolios;
    public String asOfDate;

    public class Portfolios {
        public String portfolioName;
        public String portfolioValue;
        public List<PortfolioStyles> portfolioStyles;
        public List<SecurityDetails> securityDetails;
    }

    public class SecurityDetails {
        public String securityId;
        public String symbol;
        public String name;
        public List<PortfolioStyles> securityStyles;
    }


    public static AllocationOutput parse(String json) {
        return (AllocationOutput) System.JSON.deserialize(json, AllocationOutput.class);
    }
}

MyComponent.cmp

<aura:application controller="AllocationManager">
    <ltng:require afterScriptsLoaded="{!c.myAction}" />
    <aura:attribute name="redString" type="String" />
    <div>
        <br />
        <br />
        <p style="color:red;">{!v.redString}</p>
        <br />
        <br />
    </div>
</aura:application>

MyComponentController.js

({
    myAction: function(component, event, helper) {

        var action = component.get("c.getAllocationBreakdown");
        var self = this;

        action.setCallback(this, function(response) {
            var state = response.getState();
            // console.log(state);
            $A.log(response);
            if (state === "SUCCESS") {
                component.set("v.redString", response.getReturnValue());
                // self.updateTotal(component);
                console.log("response.getReturnValue() is " + response.getReturnValue());
                // console.log(response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

Answer 1

believe you need to make your Apex Controller method as static for the client side controller to access it.

@AuraEnabled
public static AllocationOutput getAllocationBreakdown() {
   ...
}

Check this previous discussion for details : Should all AuraEnabled methods be static?

Since you are returning an Apex Class Type from your controller method, you might need to add @AuraEnabled for the members of class you are returning in your controller method

@AuraEnabled Support for Apex Class Return Types?