Show checkbox while loading component

Question

I have used Check all / Uncheck All checkboxes function to select group of Values. I used to display some data in aura iteration with checkbox values checked.

If the data row is more than one its working fine suppose if the row count is one im facing error:

"Uncaught Error in $A.getCallback() [Cannot read property 'set' of undefined]"

I used <ui:inputCheckbox>

Code:

component.find("checkBox")[i].set("v.value", true);    

var recordfinallist = component.get('v.attributename');                   
        for (var i = 0; i < recordfinallist.length; i++) {                       
            if (recordfinallist [i].isvalid__C== true){                                                      
                component.find("checkBox")[i].set("v.value", true);                               
            }                                  
         }                                     
     }

*isvalid__C is field name

This code is working proper for more than 1 rows but not for one row.

Answer 1

component.find() returns one of three types of value:

• If the local ID is unique, find() returns the component.
• If there are multiple components with the same local ID, find() returns an array of the components.
• If there is no matching local ID, find() returns undefined.

Your code is assuming that the result of find() is an array, which is why it fails when only a single checkbox is present. You need to be prepared to handle a single return value as well.

Answer 2

component.find() returns an array if there are more than one matches. Otherwise, it just returns that one element (and NOT an array). To avoid this situation, I almost always pass the result of my component.find() through a custom helper function that ALWAYS returns an array. Like so:

arrayfy: function(component) {
    //If input is an array, then just return it
    //If only one element found, then convert it into a single element array anyway
    if(Array.isArray(component)) 
        return component;
    else 
        return component? [component] : [];
},

Use it like so:

var recordfinallist = component.get('v.attributename');
for (var i = 0; i < recordfinallist.length; i++) {
    if(recordfinallist[i].isvalid__C == true)
        helper.arrayfy(component.find("checkBox"))[i].set("v.value", true);
}