1

I currently have a child component to which I pass some map values from a parent component to an attribute in the child component on the client side. I used an example which gets map values from serverside.

I am getting the mapvalues from client side but want to remove the serversidepart from the controller

I currently have the following

Component

<aura:attribute name="mapValues" type="object" /> 
    <aura:handler name="init" value="{!this}" action="{!c.getMapValues}"/>

Controller

    getMapValues : function(component, event, helper) {
        var action = component.get("c.getMap");
        action.setCallback(this, function(response){
            var state = response.getState();
                var result = component.get("v.mapValues");
                var arrayMapKeys = [];
                for(var key in result){
                    arrayMapKeys.push({key: key, value: result[key]});
                }
                component.set("v.mapValues", arrayMapKeys);
        });
        $A.enqueueAction(action);
    }

I am expecting to be able to do the following:

getMapValues : function(component, event, helper) {
       
                var result = component.get("v.mapValues");
                var arrayMapKeys = [];
                for(var key in result){
                    arrayMapKeys.push({key: key, value: result[key]});
                }
                component.set("v.mapValues", arrayMapKeys);
    }

This throws me the error:

Action failed: aura:iteration$controller$itemsChange [Maximum call stack size exceeded]

1

Stack depth exceeded indicates an infinite recursive call. This might happen because the attribute is passed back and forth between parent and child infinitely for some reason. You may need a second attribute to fix this. I think you also need to use a change handler, instead:

<aura:attribute name="mapValues" type="Object" /> 
<aura:attribute name="localMapValues" type="Object" />
<aura:handler name="change" value="{!v.mapValues}" action="{!c.updateMapValues}"/>

updateMapValues: function(component, event, helper) {
  let mapValues = component.get("v.mapValues");
  let result = Object.keys(mapValues).map(function(key) {
    return ({ key, value: mapValues[key] });
  });
  component.set("v.localMapValues", result);
}

You'll need to update the remaining mappings in your child component to use the localMapValues attribute.

| improve this answer | |

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.