How to rerender a list inside a custom object in lightning component

Question

I got the question idea from @SimonPlacentino 's original post: ui:inputCheckbox and aura:iteration: value binding . But that question doesn't get enough attention. It might be caused by it is not presenting the question clear enough to the point. So I wrote a very small repro code for that issue.

Generally speaking if we have a list inside a custom object, it is hard to set the value to notify the client side that the list should be updated. Sample class:

public class Product 
{
    @AuraEnabled public Boolean selected {get; set;}
    @AuraEnabled public List<Boolean> options {get; set;}
    @AuraEnabled public String productName {get; set;}
}

And below is my lightning app:

App:

<aura:application controller="SimpleNestedIterationController">
    <aura:attribute name="products" type="Product[]"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

    <aura:iteration items="{!v.products}" var="product">
            <p>{!product.productName}</p>
            <ui:inputCheckbox value="{! product.selected }" />
            <br/>
        <aura:iteration items="{!product.options}" var="option">
            <p>Option</p>
            <ui:inputCheckbox value="{! option.selected }" />
            <br/>
        </aura:iteration>
    </aura:iteration>
</aura:application>

Client controller:

({
    doInit : function(component, event, helper) {
        var action = component.get("c.fetchInitData");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS") {
                var initProducts = response.getReturnValue();
                component.set("v.products", initProducts);

                component.set("v.products[0].options", initProducts[0].options);
                console.log(initProducts[0].options);
                console.log(component.get("v.products"));
            }
        });

        $A.enqueueAction(action);
    }
})

Server controller:

public class SimpleNestedIterationController 
{
    @AuraEnabled
    public static List<Product> fetchInitData()
    {
        List<Product> productList = new List<Product>();
        Product p1 = new Product();
        p1.productName = 'Product 1';
        p1.selected = true;
        p1.options = new List<Boolean>();
        p1.options.add(true);
        p1.options.add(false);

        Product p2 = new Product();
        p2.selected = false;
        p2.options = new List<Boolean>();
        p2.options.add(false);
        p2.options.add(true);
        p2.productName = 'Product 2';

        productList.add(p1);
        productList.add(p2);
        return productList;
    }
}

Very simple code, can be reproduced in almost every org (you do need to have your custom domain name to use lightning app though). And the result is the options list never got set. As in the following screenshot:

And as you can see, I have already tried component.set("v.products[0].options", initProducts[0].options); which doesn't work as well. The value in console.log is just right. It just doesn't notify the UI to apply the new values.

Any thoughts on this?

Answer 1

My fault. It should just be <ui:inputCheckbox value="{!option}" />. I was simply stupid on this...