views:

241

answers:

2

I have a news feed where items in the feed are created from JSON returned from a server. When the user takes an action on an item, I want to remove it from the object via javascript.

The feed looks like this:

{"newsFeed":[{"feedId":"1",
              "title":"item1 title",
              "desc":"description of the item"},
             {"feedId":"2",
              "title":"item2 title",
              "desc":"description of the item"}]}

I'm trying to remove a JSON attribute or entry where the feedId is passed in via a variable using jQuery. I'm not sure exactly where I'm going wrong here, but when I alert the feed before and after the removal of the object, I'm getting the same response:

function removeFromFeed(feedId){
  var newsFeed=jQuery('div#newsFeed').data('newsFeed');
  alert(newsFeed.toSource());
  delete newsFeed.feedId[feedId]
  jQuery('div#newsFeed').data('newsFeed',newsFeed);
  alert(newsFeed.toSource());
}
+1  A: 

If I undertand you correctly you want to remove e.g. this whole entry {"feedId":"1", "title":"item1 title", "desc":"description of the item"} if removeFromFeed(1) is called.

So what we need to do is remove an entry from an array.

New version which should work now. (btw. what is this toSource() my browser doesn't know this method)

//http://ejohn.org/blog/javascript-array-remove/
Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from < 0 ? this.length + from : from;
    return this.push.apply(this, rest);
};

function removeFromFeed(feedId){
    var data = jQuery('div#newsFeed').data('newsFeed');
    var len = data.newsFeed.length;
    for (var i = 0; i < len; i++) {
        if (data.newsFeed[i].feedId == feedId) {
            data.newsFeed.remove(i);
            break;
        }
    }
    jQuery('div#newsFeed').data('newsFeed', data);
}

Demo: http://jsbin.com/ekali3 (Code view: http://jsbin.com/ekali3/edit)

jitter
yeah, I was thinking something like that, but apparently there is a delete function available in javascript already, so I'd rather use that then iterate over the variable. Though maybe I am mis-understanding what 'delete' is for.
pedalpete
delete can be used to delete an element from an array but `delete newsFeed.feedId[feedId]` isn't the same as `delete newsFeed[i]`. The first one should delete the feedId value only not the whole entry. The second one removes the whole object (id,title,desc). But there is one problem with delete and arrays. It doesn't change the length of the array it only sets e.g. `newsFeed[0]` to undefined. Thus my new solution which iterates over the newsFeed items and uses resigs array remove
jitter
thanks for explaining that jitter. i was wondering about that. I'll use the code you provided.
pedalpete
unfortunately, it looks like there may be a conflict with the 'array.prototype.remove' and jQuery '.remove()', as the script is erroring out when I add in array.prototype.remove. I've tried renaming the function to array.prototype.remove2, but that is still erroring out for some reason.
pedalpete
I can't detect an conflict but I had an other error in there as I didn't really test retrieving the object with `data()`. Fixed the code again. This time I also made a demo page with jQuery 1.4.2 your json object and the `remove()` method. Check if it that works for you
jitter
A: 

I'm not sure why the 'Array.prototype.remove' stuff was breaking my page, but I created a new array and just left out the object I wanted to remove.

var newsFeed=jQuery('div#newsFeed').data('newsFeed');
var newFeed={"feed":[]};
alert(newsFeed.toSource());
for (var i = 0; i < newsFeed.length; i++) {
    if(newsFeed.feed[f].shiftId!=shiftId){
        newFeed.feed.push(newsFeed.feed[f]);
    }
}

seems to work.

pedalpete