2

I built a component that retrieves a list from the database and then iterate those items applying an attribute onfilter that defaults to true on each record.

Using this little CSS trick I'm able to show or hide elements that are on the filter:

<aura:iteration items="{!v.items}" var="item">
<tr style="{!item.onfilter == true ? '' : 'display: none;'}">
...
</tr>
</aura:iteration>

And it works just fine on Sandbox (Summer 17). But it fails on the production instance (Spring 17). Since no errors are displayed on production, I decided to do a little inspection, and found that every record is being loaded as expected, but the expression is being evaluated as false and thus every record is hidden on the list, even though when I check the console logs, I can see that they all have onfilter set to true.

Does anyone know if this is a bug that is being worked on?

Edit (helper.js code)

This is what happens when I get the result from the database:

var items = response.getReturnValue();
items.forEach(function (item) {
    item.onfilter = true
})
component.set('v.items', items)

Edit 2 (after problem was solved)

This seems to be an issue on instances that are not updated to Summer 17. I'm saying this because on sandbox I've updated the component's version to use API 40, and it is working just fine.

Improve this question
8
  • Hmm, I can't see the definition of the items list, but I think you need to declare all attributes in advance or at least set them all at once (the first time you set the list is when getters and setters are defined for the objects in it). So, define a default item in your list and make sure you include the onFilter attribute. It doesn't matter if it's false or true.
    – Caspar Harmer
    May 16, 2017 at 21:58
  • If this works, I'll make it an answer :) - it's hard to tell though at this point if I should.
    – Caspar Harmer
    May 16, 2017 at 21:59
  • So, when I get the records from the db I iterate them and set the attribute as true. It even works in one of the environments, like I said.
    – Renato Oliveira
    May 16, 2017 at 22:07
  • 2
    Ok then - it's likely that because of LockerService, the terniary expression cannot see the value that you are setting. I'm going to make an answer because I think this is the issue.
    – Caspar Harmer
    May 16, 2017 at 22:19
  • 2
    Great! Let me know if my answer works.
    – Caspar Harmer
    May 16, 2017 at 22:24

1 Answer 1

Reset to default
4

If Locker Service in production is active, you are probably being tripped up by the absence of an implicit getter for the property that you are attempting to read in the iterator.

Define your items array (something) like this:

<aura:attribute 
      name="items" 
      type="Object[]" 
      default="[{'name':'something','onFilter':false}]"/>

This will allow Locker Service to create a getter and hence your object will be accessible

Improve this answer
4
  • 1
    Just complementing your post: LockerService was indeed the cause of this issue. However, it was active on production because I activated the critical update, but it worked on sandbox because Locker Service is automatically applied to components created with API 40 or more only. Since my component was using API 36, it wasn't enabled on sandbox.
    – Renato Oliveira
    May 16, 2017 at 22:25
  • Ah great. I'll update the post to say that IF Locker Service is active...
    – Caspar Harmer
    May 16, 2017 at 22:26
  • On a side note, is there a way to create a getter without setting a default value for the component's attribute?
    – Renato Oliveira
    May 16, 2017 at 22:34
  • 1
    Hmm don't think so - since it's done by the framework, we have little control over it.
    – Caspar Harmer
    May 16, 2017 at 22:35

You must log in to answer this question.

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