1

I'm creating a to do list lightning app.

I iterate over a list of items in my database. Each item has a checkbox field, called completed__c. I use an attribute in my lightning component to change if I want the component to display completed, true, or not completed items, false.

I created a lightning event on the newItem form, that adds a new item to the <c:listItems />. On the form where the new item is created, it defaults to completed__c = false, because why would you create a to do list item that is already completed?

The problem: When the new item is created on the form and is defaulted to completed__c = true, the lightning event works and adds it to the <c:listItems /> component on the page without me manually refreshing. But when I default on the form to completed__c = false and set the component attribute to completed = false. I get this error

enter image description here

Here is what my code looks like.

<!--c:listItems-->
<aura:attribute name="items" type="item__c[]"/>
<aura:attribute name="completed" type="Boolean" default="true"/>

<aura:iteration item="{!v.items}" var="item">

    <aura:if isTrue="{!item.completed__c == v.completed}">

        <ui:outputText value="{!item.Name}" />

    <aura:set attribute="else">

    </aura:set>

    </aura:if>

<aura:iteration>

<!--myApp.app-->

<c:listItems completed="false" />
7
  • Could it be that <aura:if isTrue="{false == false}"> equals true? So if the whole statement is true in that instance, and will only let true items to be put in that component. Since I'm creating an item is completed == false, the event won't push.
    – Tyler Zika
    Commented Jun 9, 2016 at 21:33
  • 1
    Hi Tyler, Are you using the Chrome Plugin for Lightning and if so, when you look at the value for items, what is it showing? Also, is this code for a child component and if so, you might want to show the code for the parent component that calls this component. It might show something. Commented Jun 10, 2016 at 15:08
  • Interesting, using the Chrome Plugin, items = "[]", and when I click on the [], the array is holding both completed__c (true) and not completed__c(false), items. This is not a child component. The component is right in the app file.
    – Tyler Zika
    Commented Jun 10, 2016 at 15:55
  • 1
    What happens if you change the conditional to this: !item.completed__c === v.completed with a different equality check? Commented Jun 10, 2016 at 15:58
  • 1
    Let me think about this some more. I am at work now and can't really get to it until this weekend. Let me know if you figure it out in the meantime. Commented Jun 10, 2016 at 16:00

2 Answers 2

1

After looking at all the code you sent me, I am pretty sure the problem you are encountering is the same as the one reported here, which appears to be a Framework issue yet to be resolved.

That said, I have a better workaround than the one one suggested in that post. The problem seems to happen when the call returns an empty array such as what would happen for those items marked non-completed. But, it occurred to me that you might want to re-consider how you are getting the data and instead of returning all the data in each doInit and then using the aura:if to only display what you want. Instead you can resolve this (and I verified it worked by the way), by simply changing your code to pass the completed flag to the getWhiteboardItemsDB method in your Apex class and only return the data you actually want.

This would involve changing the code in your Apex Controller to look like the following:

public with sharing class ListWhiteboardItemsApexController {

@AuraEnabled
public static List<Whiteboard_Item__c> getWhiteboardItemsDB(Boolean completed) {
    return [SELECT Id, OwnerId, IsDeleted, Name, CreatedDate, LastModifiedDate, CreatedById, LastModifiedById, SystemModstamp, 
            AssignedTo__c, Completed__c, CompletedBy__c, Completed_Date__c, High_Priority__c, Display__c, Item_Due_Date__c
            FROM Whiteboard_Item__c
           WHERE Completed__c =: completed];
}
 }

And also change the code in the helper function that calls this method to look like the following:

 getWhiteboardItems : function(component) {
    var action = component.get('c.getWhiteboardItemsDB');
    var completed = component.get('v.completed');
    action.setParams({ "completed" : completed});
    action.setCallback(this, function(response) {
        var state = response.getState();
        if(component.isValid() && state == "SUCCESS") {
            component.set("v.whiteboardItems", response.getReturnValue());
        }
    });
    $A.enqueueAction(action);
}

You can then leave your code in the ListItems component with the aura:if and it should work without getting the error.

Please let me know if you think this would work and if so, mark this as the answer so it can possibly help other people.

1

remove the aura:set tag from our code, empty aura:set tags cause errors, that is make your code :

<!--c:listItems-->
<aura:attribute name="completed" type="Boolean" default="true"/>

<aura:iteration items="{!v.items}" var="item">

    <aura:if isTrue="{!item.completed__c == v.completed}">

        <ui:outputText value="{!item.Name}" />

   </aura:if>
<aura:iteration>
6
  • that didn't work. Thanks for your effort!
    – Tyler Zika
    Commented Jun 9, 2016 at 19:12
  • can you try making the 'item' attribute to 'items' that's a typo, I'm editing my answer also
    – Gopal Rao
    Commented Jun 9, 2016 at 19:17
  • 1
    Also the aura:if tag is not closed properly in the code snippet posted as a part of the question
    – Gopal Rao
    Commented Jun 9, 2016 at 19:20
  • Good eye. Fixed that on my post. The if was there in my actual code.
    – Tyler Zika
    Commented Jun 9, 2016 at 19:24
  • did that work for you Tyler ?
    – Gopal Rao
    Commented Jun 9, 2016 at 19:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .