How to get selected pick list values with Apex for Aura Component

Question

I have established a custom field called "Products Used" on the account object with a variety of banking products to choose from. I am trying to program an Apex controller to query the selected products for the account page the user is on and then return a true or false to my Aura component.

The idea is if a product is being used / true, it will highlight the products name in green in the component on the account page.

I am having trouble building the apex controller. I've had no luck using the SOQL statement as it queries all pick list options. Any advice or guidance on what approach I should be taking to build this controller?

Component

<aura:component controller="gridController"
implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>  
            <lightning:icon iconName="standard:product_item" alternativeText="Products Used"/>
        </lightning:layoutItem>
     <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Products</h1>
                <h2 class="slds-text-heading--medium">Products Used</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>  
<!-- /END PAGE HEADER -->
<!-- NEW PRODUCTS USED GRID -->
<lightning:layout>
    <lightning:layoutItem >
        <c:productGrid/>
    </lightning:layoutItem>
    <!-- /END NEW PRODCUTS USED GRID -->
</lightning:layout>

Apex Controller

public with sharing class gridController {  

@AuraEnabled
public static testMethod List<String> getProducts(){
    List<String> productsUsedList = new List<String>();
    Schema.DescribeFieldResult fieldResult = 
    Account.Products_Used__c.getDescribe();
    List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
    for (Schema.PicklistEntry pickListVal : ple) {
        productsUsedList.add(pickListVal.getLabel());
        system.debug(productsUsedList);
    }
    return productsUsedList;
}
}

JS controller

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

    var action = component.get("c.getProducts");

    action.setCallBack(this, function(response) {
        var state = response.getResponse();
        if (response == "Checking Account") {
            component.set(document.getElementById("p1").style.color = "magenta");
    }
        else {
            console.log("Failed with state: " + state);    
       }
    });
  $A.enqueueAction(action);
}   
});

Product Grid

<aura:component >
<div aria-labelledby="newproductgrid">
    <!-- BOXED AREA -->
    <fieldset class="slds-box slds-theme--default slds-container--medium">
    <div class="main-box main-box--sizing slds-grid slds-wrap">
        <div id="p1" class="slds-size_1-of-2">
             <div id="p1" class="slds-box slds-box_medium slds-text-align_center slds-text-heading_small slds-m-around_medium">Checking Account</div>
                </div>
         <div id="p2" class="slds-size_1-of-2">
             <div class="slds-box slds-box_medium slds-text-align_center slds-text-heading_small slds-m-around_medium">Savings Account</div>
                </div>
         <div class="slds-size_1-of-2">
             <div class="slds-box slds-box_medium slds-text-align_center slds-text-heading_small slds-m-around_medium">Mortgage</div>
                </div>
        <div class="slds-size_1-of-2">
             <div class="slds-box slds-box_medium slds-text-align_center slds-text-heading_small slds-m-around_medium">Home Equity</div>
                </div>
        <div class="slds-size_1-of-2">
             <div class="slds-box slds-box_medium slds-text-align_center slds-text-heading_small slds-m-around_medium">Credit Card</div>
                </div>
        <div class="slds-size_1-of-2">
             <div class="slds-box slds-box_medium slds-text-align_center slds-text-heading_small slds-m-around_medium">Online Banking</div>
                </div>
        </div>            
    </fieldset>
</div>  

Answer 1

There's a couple of things not quite clear here, perhaps you forgot to add some of your code?

In Apex controller, why "testMethod", that's probably there by mistake.

Your method "getProducts" is good enough to get the product options, but the JS controller is not processing the results right. You're checking a string, but returning a list.

See the docs on how to check the response state and get the result or error here (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_actions_call.htm

What's in c:productGrid component? Where are you getting the current record's selected value in the picklist?

Also careful of appPageTypes, you need to be on recordHome to get the recordId

I think you could combine the Apex method you have now with Lightning Data Service (force:recordData). User aura:iteration to iterate over the picklist options and condition the rendering based on the value in the picklist of your current record.

https://developer.salesforce.com/docs/component-library/bundle/force:recordData/documentation

https://developer.salesforce.com/docs/component-library/bundle/aura:iteration/example