0

I have a @AuraEnabled method from which I pass a custom object list to a lighting component on which I want to iterate. The custom object will have a dynamic map from which I want to create a dynamic picklist as a input selection (availableOptions) see:

Apex

hi.invoiceId = zi[0].id;
hi.invoiceNumber = zi[0].Name; 
hi.balanceAmount = zi[0].Balance__c;
hi.totalAmount = zi[0].TotAmount__c;
hi.customerName = 'Test';
hi.zuoraStatus = zi[0].Status__c; 
hi.handlingStatus = zi[0].Hand_Status__c;
hi.selectedOption = 'A'; 
hi.availableOptions = new Map<String,string> {'e'=>'f', 'g'=> 'h'}; 
hiList.add(hi);   
hiList.add(hi); 
return hiList;

Lightning Component

<aura:iteration items="{!v.handleInvoices}" var="Hinv">
    Invoice : {!Hinv.invoiceId} &nbsp; {!Hinv.invoiceNumber} &nbsp; {!Hinv.balanceAmount} &nbsp; {!Hinv.totalAmount} &nbsp; {!Hinv.customerName} &nbsp; {!Hinv.zuoraStatus} &nbsp; {!Hinv.handlingStatus} &nbsp;
    {!Hinv.selectedOption} &nbsp; {!Hinv.availableOptions}  <br/>
</aura:iteration> 

Clientside Controller

({
    doInit : function(cmp, event, helper) {
        var action = cmp.get("c.testHandlInvoice");

        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set('v.handleInvoices', response.getReturnValue());
            console.log(cmp.get('v.handleInvoices'));
            }
        });
        $A.enqueueAction(action);
}
})

Result

enter image description here

How do I pass the map value to a picklist selection instead of [object Object]?

Output console log

Proxy {0: {…}, 1: {…}}
[[Handler]]: Object
[[Target]]: Array(2)
0:
availableOptions: {e: "f", g: "h"}
balanceAmount: -100
customerName: "Test"
handlingStatus: "New"
invoiceId: "a0S2o000023CSHoEAO"
invoiceNumber: "INV-001"
selectedOption: "A"
totalAmount: -100
zuoraStatus: "Posted"
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ (e,t)
__defineSetter__: ƒ (e,t)
__lookupGetter__: ƒ (e)
__lookupSetter__: ƒ (e)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
1:
availableOptions:
e: "f"
g: "h"

Is it possible to do something like:

 <lightning:select name="select1" label="Selection" required="true">
             <aura:iteration items="{!Hinv.availableOptions}" var="Opt">
        <option value="">{!Opt.e}</option>
                  </aura:iteration> 
    </lightning:select>
1

That's expected. When you try to print out a javascript object on the page you'd get [object Object] - https://www.w3schools.com/js/js_object_display.asp

Your map is most likely reaching the lightning component. Did you check the console.log output in the browser ? Please put the output here for more clarity. If all is well, you should be able to see the Map as a nested object in every invoice row.

If you want to pass this Map to a picklist selection, add a child component in the aura:iteration that can read the Object and generate a picklist from it.

<aura:iteration items="{!v.handleInvoices}" var="Hinv">
    Invoice : {!Hinv.invoiceId} &nbsp; {!Hinv.invoiceNumber} &nbsp; {!Hinv.balanceAmount} &nbsp; {!Hinv.totalAmount} &nbsp; {!Hinv.customerName} &nbsp; {!Hinv.zuoraStatus} &nbsp; {!Hinv.handlingStatus} &nbsp;
    {!Hinv.selectedOption} &nbsp; 
<c:customPicklist input = "{!Hinv.availableOptions}"/>  <br/>
</aura:iteration> 
4
  • I Added the console log the map indeed reaches the lightning component. Cant this be achieved without a extra component. And if not wil it be possible to bind the selected result to the record?
    – Thomas
    Jul 28 '20 at 8:18
  • If I do {!Hinv.availableOptions.e} In the component I get the value printed
    – Thomas
    Jul 28 '20 at 8:25
  • A picklist will always be a component of its own. [Check] (developer.salesforce.com/docs/component-library/bundle/…) You can fire an event from a picklist component on selection and handle it in the parent component to find which row was clicked and what was the value selected.
    – Nagen Sahu
    Jul 28 '20 at 9:06
  • For reference - <salesforce.stackexchange.com/questions/270597/…>
    – Nagen Sahu
    Jul 28 '20 at 9:12

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.