javascript - 使用jQuery在JavaScript对象中添加/删除项目

我有一个如下所示的Javascript对象:


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"}


]};



如果我想在这个列表中添加/删除项目,我应该如何使用 jQuery? 客户希望此列表可动态修改。

时间:

首先,您引用的代码不是JSON。 你的代码是JavaScript对象文字符号。 JSON是设计的子集,便于解析。

代码定义了包含对象( 每个都带有 idnametype )的array ( items )的对象( data ) 。

你不需要或者不需要 jQuery,只是 JavaScript 。

添加一个项目的时间:


data.items.push(


 {id:"7", name:"Douglas Adams", type:"comedy"}


);



这增加了结果。 请参见下面添加中间部分。

删除项目:

有多种方法 splice 方法是最通用的方法:


data.items.splice(1, 3);//Removes three items starting with the 2nd,


//("Witches of Eastwick","X-Men","Ordinary People")



splice 修改原始 array,并返回你删除的项目的array 。

在中间添加:

实际上,splice 同时添加和删除。 splice 方法的签名是:


removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[,.. .]]]);



  • index - 开始更改的索引
  • num_to_remove - 从该索引开始,删除这个条目
  • addN - 然后插入这些元素

因此,我可以在 第三方 位置中添加项,如下所示:


data.items.splice(2, 0,


 {id:"7", name:"Douglas Adams", type:"comedy"}


);



它的含义是:从索引2开始,删除零项,然后插入以下项。 结果如下所示:


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"}


]};



你可以删除一些并同时添加一些:


data.items.splice(1, 3,


 {id:"7", name:"Douglas Adams", type:"comedy"},


 {id:"8", name:"Dick Francis", type:"mystery"}


);



。即从索引 1开始,删除三个条目,然后添加这两个条目。 结果是:


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"}


]};



...