Question

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

Answer 1

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)