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 Answer 1

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, 2020 at 8:18
  • If I do {!Hinv.availableOptions.e} In the component I get the value printed
    – Thomas
    Jul 28, 2020 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, 2020 at 9:06
  • For reference - <salesforce.stackexchange.com/questions/270597/…>
    – Nagen Sahu
    Jul 28, 2020 at 9:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .