Select All checkbox, Issue with one row of ui:inputcheckbox in aura:iteration

Question

I got one issue with ui:inputcheckbox, if there is one contact, and if i select on SelectALL checkBox, it is not getting selected. If there is more than one contact, then it is working fine.

cmp

         <ui:inputCheckbox label="" class="check" aura:id="master" click="{!c.checkAll}" /> 

                <tbody>
                    <aura:iteration items="{!v.contactNames}" var="contact">
                        <tr>
                            <td data-label="Contact Name">
                                 <ui:inputCheckbox text="{!contact.Id}" aura:id="dependent" value="" change="{!c.updateCheckboxes}"/>
                            </td>
                            <td style="right: 580px;">
                                <div class="slds-truncate">{!contact.Name}</div>
                            </td>

                        </tr>
                    </aura:iteration>
                </tbody>
            </table>

JS

 checkAll: function(component, event, helper) {
    var master = component.find("master");
    var boxPack = component.find("dependent");

    var val = master.get("v.value");

         if (val == true) {

        for (var i = 0; i < boxPack.length; i++) {
            boxPack[i].set("v.value", true);
        }
    } else {
        for (var i = 0; i < boxPack.length; i++) {
            boxPack[i].set("v.value", false);
        }
    }



},

Answer 1

If only one record is displayed, only one instance of the ui:inputCheckbox is present in the view. In that case, doing component.find("dependent") will return Object of type Aura.Component not an array of Aura.Component(i.e Aura.Component[]).

Solution is to convert Object to Array, like below:

if (!Array.isArray(boxPack)) {
    boxPack = [boxPack];
}

Answer 2

Also, apart from the array check, you should rewrite your code like this(there is no need of the if...else...):

checkAll: function(component, event, helper) {
  var master = component.find("master");
  var boxPack = component.find("dependent");
  if (!Array.isArray(boxPack)) {
    boxPack = [boxPack];
  }

  var val = master.get("v.value");
  for (var i = 0; i < boxPack.length; i++) {
    boxPack[i].set("v.value", val);
  }
},