Maintaining a flagged checkbox in a component

Question

I have a component that contains a list of associated selection lists, consisting of 1 level, 2 level, 3 level. The second and third levels have a list of checkboxes, which the user can flag. This data is passed to an apex class and saved in the corresponding fields. So far everything is ok, the problem is that I should be able to keep the checkbox flagged on the levels based on the data saved by the user even when I close and reopen the component. but so far I haven't been able to achieve this result, can anyone help me? I attach part of the code.

   <aura:if isTrue="{!v.selectedSecondLevel == sett}">
                    <ul>
                        <aura:iteration items="{!v.secondSet}" var="sett2">
                            <li>        
                <div class="livello2 slds-p-left_medium">
                               <input type="checkbox"
                                          aura:id="2livello" id="{!'checkbox_' + sett2}" 
                                          onchange="{!c.selectSecondLevel}"
                                          data-livello1="{!sett}" data-livello2={!sett2}"
                                 label="{!sett2}" /> 
      <label for="{!'checkbox_' + sett2}" class="slds-m-left_small">{!sett2}</label> 
                                    </div>

Controller:

showSecondLevel: function(component, event, helper) {
    var accountId = component.get("v.recordId");

    var livello1 = event.currentTarget.dataset.livello1;
    var previouslySelected = component.get("v.selectedSecondLevel");
    
  

    component.set("v.selectedFirstLevel", livello1);
    component.set("v.selectedSecondLevel", livello1);
    helper.getSecondLevel(component, livello1);
helper.initCheckbox(component);
    
},

HELPER:

initCheckbox: function(component, event) {
        var actionFigli = component.get("c.PopolaCheckFigli");
        actionFigli.setParams({ AccId: component.get("v.recordId") });

        actionFigli.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var figli = response.getReturnValue();
                console.log("Figli:", figli);
                
                component.set("v.figli", figli); // Imposta la lista dei figli nel componente

                 // Itera sui valori delle checkbox
        var checkboxes = component.find("2livello");
                console.log("checkbox: " ,checkboxes);
            }
          
    
});

From the apex class method PopolaCheckFigli, I get the value of the data previously saved in the database. What I need to do is take this data and flag the corresponding checkbox.

In the console log I see that for the 2nd level value this is printed: checkbox: Proxy(Array) {0: a, 1: a, 2: a} but I cannot access the values ​​inside it, making it impossible for me to obtain the result which I'm trying to achieve.I'm definitely doing something wrong and there is probably 1 simpler method, can anyone help me? Thank you

Answer 1

The issue you're facing is related to how you're trying to access the checkbox elements in your component. In Aura, when you use component.find("auraId"), it returns a single component if there's only one element with that aura:id, or it returns an array of components if there are multiple elements with that aura:id.

In your case, you have multiple checkboxes with the aura:id "2livello", so component.find("2livello") is returning an array of components. However, you're trying to access it as if it's a single component, which is why you're seeing the Proxy(Array) in your console log.

Here's how you can modify your helper method to iterate over the checkboxes and set their values based on the data returned from your Apex method:

initCheckbox: function(component, event) {
    var actionFigli = component.get("c.PopolaCheckFigli");
    actionFigli.setParams({ AccId: component.get("v.recordId") });

    actionFigli.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var figli = response.getReturnValue();
            console.log("Figli:", figli);
            
            component.set("v.figli", figli); // Imposta la lista dei figli nel componente

            // Itera sui valori delle checkbox
            var checkboxes = component.find("2livello");
            for (var i = 0; i < checkboxes.length; i++) {
                var checkbox = checkboxes[i];
                var checkboxValue = checkbox.get("v.value");
                // Check if the checkbox value is in the figli array
                if (figli.includes(checkboxValue)) {
                    checkbox.set("v.checked", true);
                }
            }
        }
    });

    $A.enqueueAction(actionFigli);
}

This code assumes that figli is an array of values that should be checked in the checkboxes. It iterates over the checkboxes and checks if the value of each checkbox is in the figli array. If it is, it sets the checkbox to checked.

Please note that this is a basic example and you might need to adjust it based on your specific use case and data structure.