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>
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.
I think you will need to build yourself a simple array of true/false values that matches the Map.
In your controller you could build yourself both a keys and values array and use one to work out the other.
var keys = Object.keys(yourMap);
var keyObjects = [];
keys.forEach(function(key){
var keyObject = {};
keyObject.key = key;
keyObject.selected = yourMap[key].selected;
});
component.set('v.keyObjects',keyObjects);
Then use the name attribute to store some data as I don't think pass through values are allowed. If you don't want to do that, use a standard input, it's pretty easy to style them the way you want. You can't use aura:id either, as it gets rewritten.
<aura:iteration items="{! v.keyObjects }" var="obj">
<lightning:input name="{! obj.key }" type="checkbox" label=" " onchange="{! c.checkCustomMap }" checked="{!obj.selected}"/>
</aura:iteration>
Finally in the checkCustomMap function, you would use the event.getSource() method to get the key via the name attribute.
aura:iteration for the whole list.
Map and use wherever you like - the Array is just a way to iterate the map as discrete objects
Array and a Map pointing to the same wrapper object. The Array is used for any iteration, the Map is used for easy object access.