How to pass map values on client side from component to controller

Question

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]

sfdcfox · Accepted Answer · 2020-07-30 08:06:05Z

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.

Stack Exchange Network

How to pass map values on client side from component to controller

1 Answer 1

You must log in to answer this question.

Hot Network Questions

How to pass map values on client side from component to controller

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions