remove items from array not working

Question

I have an array that is being populated on an action.

The problem that I am having is how to remove the items from the array?.

I am still learning ember.

{{#each request in model}}
    <li class="field hotel-filter-list">
        <label class="details checkbox" {{action 'toggleHotelFilterSelection' on='mouseDown'}}>
            {{input type="checkbox" checked=isChecked}}
            <span></span>
            <div class="info semi-bold">
            {{request.name}}
            </div>
        </label>
    </li>
{{/each}}


globalFilterIds: [],
actions: {
  toggleHotelFilterSelection: function(allRequest) {
  var requests = this.get('requests');
  if(requests.indexOf(allRequest.get('id')) < 0){
    this.get('globalFilterIds').push(allRequest.get('id'));
  }else{
   this.get('globalFilterIds').remove(allRequest.get('id'));
  }
}

,

possible duplicate ? http://stackoverflow.com/questions/5767325/remove-a-specific-element-from-an-array — fadomire, Jul 15 '15 at 16:51

Kit Sunde · Accepted Answer · 2015-07-15T20:27:13.697

2

You can't remove something from an array by value in javascript, you have to remove it by index:

globalFilterIds: [],
actions: {
  toggleHotelFilterSelection: function(allRequest) {
    var requests = this.get('requests');
    var filterIds = this.get('globalFilterIds');
    if(requests.indexOf(allRequest.get('id')) < 0){
      filterIds.push(allRequest.get('id'));
    }else{
      var removeIndex = filterIds.indexOf(allRequest.get('id'));
      filterIds.splice(removeIndex, 1);
    }
  }
}

Now Ember has a (deprecated) Set implementation. Which would make these operations easier and let you delete by value.

requests: Ember.Set()
globalFilterIds: Ember.Set(),
actions: {
  toggleHotelFilterSelection: function(allRequest) {
    var id = allRequest.get('id')
    if(!this.get('requests').contains(id)){
      this.get('globalFilterIds').addObject(id);
    }else{
      this.get('globalFilterIds').removeObject(id);
    }
  }
}

I don't know if you use ember-cli yet, but there's both a plugin for re-adding Set (https://www.npmjs.com/package/ember-cli-set-replacement) with your project and babel has a support for ES6 sets if used with the babel polyfill (https://babeljs.io/docs/learn-es2015/#map-set-weak-map-weak-set) something that can be enabled (https://github.com/babel/ember-cli-babel/pull/6). That is until all the browsers you're targeting has native support, something which the edge browsers has.

edited Jul 15 '15 at 20:27

answered Jul 15 '15 at 19:12

Kit Sunde

32,665
22
111
176

great answer but didn't worked for me. I also forgot to mention that I 'am using checkbox. Please check my updated question. Your help is well appreciated – Jose CC Jul 15 '15 at 19:59
@JosephCC In your updated example either all checkboxes are checked or none are. That's because `isChecked` is implicitly a variable on the current controller. Also I'm not sure if touch enabled devices will respond well to `mousedown` if you leave the `on` property blank it's by default `click` which would work better I think. – Kit Sunde Jul 15 '15 at 20:13
the reason why I am using mouseDown is because there is an issue with gumby framework. With out that the click will no be register by ember – Jose CC Jul 15 '15 at 20:24
1

@JosephCC I think you should do one of 2 things. Either `isChecked` is on your `request` objects (although perhaps more semantically named `isSelected` or `isActive`), or if it's something local to this controller create a plain object on init, then loop over those. Also if I keyboard navigate to the checkbox and select it, it's not going to trigger the action. – Kit Sunde Jul 15 '15 at 20:26
1

@JosephCC If you're using the action as a toggle shouldn't you check if the id is in `this.get('globalFilterIds')` as opposed to `this.get('requests')`? Also is `this.get('requests')` an array of ints or is it the same objects you're iterating over in your template? If `this.get('requests')` is an array of objects then `this.get('requests').indexOf(id)` will always be `-1`. – Kit Sunde Jul 15 '15 at 20:31

remove items from array not working

1 Answers1