CODEWITHSUNDEEP
ember.js
tarponjargon
tarponjargon

Reputation: 1032

Delete a key (and value) from ember object

Ember newbie and I have a feeling I am doing something very wrong here. Basically, I am trying to use an action to delete a key from a custom ember object. The action takes the key as the parameter (though that's a very jquery way to do it - perhaps I am missing a more "ember" way to do it?)

I created a twiddle

I am able to set the value to null which kind of works, but I'd prefer to remove the key and the value entirely. I would think .removeObject(key) would be the ticket, but it doesn't work. The console complains with:

Uncaught TypeError: thisData.removeObject is not a function

So I think I am using it in the wrong context.

Here's my example controller:

import Ember from 'ember';

const UrlObj = Ember.Object.extend({});

export default Ember.Controller.extend({
    urlData: UrlObj.create({
        queryParams: {
            filter_breadcrumb: [
                'Jewelry > Rings',
                'Clothing and Accessories > Sweaters'
            ],
            filter_price: ['100.0-200.0'],
            filter_size: ['S','L'],
            paging: 18,
            q: 'gold',
            search_sort: 'relevance'
        }
    }),
    actions: {
        deleteStuff(key) {
            alert("deleteStuff called with " + key);
            let thisData = Ember.get(this.urlData, 'queryParams');

            //thisData.removeObject(key); // doesn't work, wrong context?
            //Ember.get(this.urlData, 'queryParams').removeObject(key); // doesn't work, wrong context?
            //delete thisData[key]; // this deletes it from the object but it's JS so ember is not aware of it

            Ember.set(thisData, key, null); // this kind of works, but I'd like to remove the key AND the value
        }
    }
});

I commented out the lines that don't work.

Here's my template:

here's the data list:<br>
{{#each-in urlData.queryParams as |key value|}}
<a href="#" {{action "deleteStuff" key}}>{{key}}: {{value}}</a><br>
{{/each-in}}

Any help appreciated!

Upvotes: 0

Views: 1702

Answers (2)

Salamon J
Salamon J

Reputation: 1

No need to use "notifyPropertyChange"

export default Ember.Controller.extend({

urlData: {
    queryParams: { 

        filter_breadcrumb: [
             'Jewelry > Rings',
             'Clothing and Accessories > Sweaters'
        ],
        filter_price: ['100.0-200.0'],
        filter_size: ['S','L'],
        paging: 18,`enter code here`
        q: 'gold',
        search_sort: 'relevance'
    }
},
actions: {

  deleteStuff(key) {
  alert("deleteStuff called with " + key);
  let thisData = this.get('urlData').queryParams;     
  delete thisData[key]; 
  console.log(this.get('urlData')); //u ll get deleted data


}
}

});

Upvotes: 0

Ebrahim Pasbani
Ebrahim Pasbani

Reputation: 9406

You need to notify property changed.

And no need to use Ember.Object

export default Ember.Controller.extend({
    urlData: {
        queryParams: {
            filter_breadcrumb: [
                 'Jewelry > Rings',
                 'Clothing and Accessories > Sweaters'
            ],
            filter_price: ['100.0-200.0'],
            filter_size: ['S','L'],
            paging: 18,
            q: 'gold',
            search_sort: 'relevance'
        }
    },
  actions: {
        deleteStuff(key) {
      alert("deleteStuff called with " + key);
      let thisData = Ember.get(this.urlData, 'queryParams');     
      delete thisData[key]; 
      this.notifyPropertyChange('urlData');


    }
  }

});

Upvotes: 3

Related Questions