Delete a key (and value) from ember object - ember.js

Question

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!

Answer 1

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');
}
}
});

Answer 2

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
}
}
});