[SalesForce] Set checkbox value based on value from Map attribute in Lightning Component markup

I have map attribute in lightning component. It has id key and value is true or false for checkbox.

<aura:attribute name="customMap" type="Map" />

I want to iterate via array and get value from this map (that is already populated). 

<aura:iteration items="{! v.customList }" var="customListItem">
   <lightning:input aura:id="{! customListItem.Id }" type="checkbox" label=" " onchange="{! c.checkCustomMap }" checked="SET_CHECKED_OR_ONCHECKED"/>
</aura:iteration>

Best Answer

You can workaround with two more steps:

The Component:

<aura:attribute name="mapObj" type="String[]" />
    <aura:iteration items="{! v.customList }" var="customListItem">
        <aura:iteration items="{!v.mapObj}" var="mapObjItem">
            <aura:if isTrue="{!mapObjItem.key == customListItem.id}">
                <lightning:input aura:id="{! customListItem.Id }" type="checkbox" label=" " checked="{!mapObjItem.value}"/>
            </aura:if>
        </aura:iteration>
   </aura:iteration>

Matching the Map key with the custom list usong aura:if. If key matched then print the checkbox with the value that Map contains. It can be false or true. It will show checkbox for the keys present in Map only.

The controller:-

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

        // .... logic to set list
        component.set('v.customList', arr);


        // .... setting up the map
        component.set('v.customMap', myMap);

        var mapObj = [];
        for (var prop of myMap.keys()) {
          var mapItem = {};
          mapItem.key = prop;

          // if value is boolean type
          mapItem.value = myMap.get(prop);
          // if value is String. Don't use above statement if this is true.
          mapItem.value = myMap.get(prop) == 'true' ? true : false;
          mapObj.push(mapItem);
        }
        component.set('v.mapObj', mapObj);

    },

    checkCustomMap : function(component, event, helper) {

      // To do
    }
})

Here I converted the Map into object list accessible in the component.

Note: If Map has checkbox value as String, it will check all checkbox regardless of value (true/false). So, it required to be converted in Boolean type for correct re-rendering.

Related Topic