Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding/removing items from a JavaScript object with jQuery

I have a JavaScript object as follows:

var data = {items: [     {id: "1", name: "Snatch", type: "crime"},     {id: "2", name: "Witches of Eastwick", type: "comedy"},     {id: "3", name: "X-Men", type: "action"},     {id: "4", name: "Ordinary People", type: "drama"},     {id: "5", name: "Billy Elliot", type: "drama"},     {id: "6", name: "Toy Story", type: "children"} ]}; 

If I wanted to add/remove items to this list, how would I go about it using jQuery? The client wants this list to be dynamically modifiable.

like image 208
Bug Magnet Avatar asked Dec 27 '10 11:12

Bug Magnet


2 Answers

First off, your quoted code is not JSON. Your code is JavaScript object literal notation. JSON is a subset of that designed for easier parsing.

Your code defines an object (data) containing an array (items) of objects (each with an id, name, and type).

You don't need or want jQuery for this, just JavaScript.

Adding an item:

data.items.push(     {id: "7", name: "Douglas Adams", type: "comedy"} ); 

That adds to the end. See below for adding in the middle.

Removing an item:

There are several ways. The splice method is the most versatile:

data.items.splice(1, 3); // Removes three items starting with the 2nd,                          // ("Witches of Eastwick", "X-Men", "Ordinary People") 

splice modifies the original array, and returns an array of the items you removed.

Adding in the middle:

splice actually does both adding and removing. The signature of the splice method is:

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]); 
  • index - the index at which to start making changes
  • num_to_remove - starting with that index, remove this many entries
  • addN - ...and then insert these elements

So I can add an item in the 3rd position like this:

data.items.splice(2, 0,     {id: "7", name: "Douglas Adams", type: "comedy"} ); 

What that says is: Starting at index 2, remove zero items, and then insert this following item. The result looks like this:

var data = {items: [     {id: "1", name: "Snatch", type: "crime"},     {id: "2", name: "Witches of Eastwick", type: "comedy"},     {id: "7", name: "Douglas Adams", type: "comedy"},     // <== The new item     {id: "3", name: "X-Men", type: "action"},     {id: "4", name: "Ordinary People", type: "drama"},     {id: "5", name: "Billy Elliot", type: "drama"},     {id: "6", name: "Toy Story", type: "children"} ]}; 

You can remove some and add some at once:

data.items.splice(1, 3,     {id: "7", name: "Douglas Adams", type: "comedy"},     {id: "8", name: "Dick Francis", type: "mystery"} ); 

...which means: Starting at index 1, remove three entries, then add these two entries. Which results in:

var data = {items: [     {id: "1", name: "Snatch", type: "crime"},     {id: "7", name: "Douglas Adams", type: "comedy"},     {id: "8", name: "Dick Francis", type: "mystery"},     {id: "4", name: "Ordinary People", type: "drama"},     {id: "5", name: "Billy Elliot", type: "drama"},     {id: "6", name: "Toy Story", type: "children"} ]}; 
like image 57
T.J. Crowder Avatar answered Sep 25 '22 01:09

T.J. Crowder


Splice is good, everyone explain splice so I didn't explain it. You can also use delete keyword in JavaScript, it's good. You can use $.grep also to manipulate this using jQuery.

The jQuery Way :

data.items = jQuery.grep(                 data.items,                  function (item,index) {                    return item.id !=  "1";                  }); 

DELETE Way:

delete data.items[0] 

For Adding PUSH is better the splice, because splice is heavy weighted function. Splice create a new array , if you have a huge size of array then it may be troublesome. delete is sometime useful, after delete if you look for the length of the array then there is no change in length there. So use it wisely.

like image 27
Imrul Avatar answered Sep 25 '22 01:09

Imrul