使用jQuery从JavaScript对象添加/删除项目

Question

我有一个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进行操作？客户端希望此列表可动态修改.

Answer 1

首先,您引用的代码不是 JSON.您的代码是JavaScript对象文字表示法.JSON是为便于解析而设计的子集.

您的代码定义的对象(data包含数组()items对象)(每个都具有id,name和type).

你不需要或想要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 修改原始数组,并返回删除的项目数组.

在中间添加:

splice实际上做了添加和删除.该splice方法的签名是:

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

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

所以我可以在第3个位置添加一个项目,如下所示:

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

Answer 2

拼接是好的,每个人解释拼接,所以我没有解释它.你也可以在JavaScript中使用delete关键字,这很好.您也可以使用$ .grep来使用jQuery来操作它.

jQuery方式:

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

删除方式:

delete data.items[0]

对于添加PUSH,拼接更好,因为拼接是重加权函数.Splice创建一个新数组,如果你有一个巨大的数组大小,那么它可能会很麻烦.删除有时是有用的,如果你查找数组的长度,删除后,那里的长度没有变化.所以明智地使用它.

Answer 3

如果您使用的是jQuery,则可以使用extend函数添加新项.

var olddata = {"fruit":{"apples":10,"pears":21}};

var newdata = {};
newdata['vegetables'] = {"carrots": 2, "potatoes" : 5};

$.extend(true, olddata, newdata);

这将产生:

{"fruit":{"apples":10,"pears":21}, "vegetables":{"carrots":2,"potatoes":5}};

Answer 4

这根本不是JSON,它只是Javascript对象.JSON是数据的文本表示,它使用Javascript语法的子集.

您无法找到有关使用jQuery操纵JSON的任何信息的原因是因为jQuery没有任何东西可以做到这一点,而且通常根本没有完成.您以Javascript对象的形式操作数据,然后将其转换为JSON字符串(如果这是您需要的).(但jQuery确实有转换方法.)

你拥有的只是一个包含数组的对象,因此你可以使用已有的所有知识.只是data.items用来访问数组.

例如,要使用动态值将另一个项添加到数组:

// The values to put in the item
var id = 7;
var name = "The usual suspects";
var type = "crime";
// Create the item using the values
var item = { id: id, name: name, type: type };
// Add the item to the array
data.items.push(item);

Answer 5

在 json 数组中添加对象

var arrList = [];
var arr = {};   
arr['worker_id'] = worker_id;
arr['worker_nm'] = worker_nm;
arrList.push(arr);

从 json 中删除对象

它对我有用。

  arrList = $.grep(arrList, function (e) { 

        if(e.worker_id == worker_id) {
            return false;
        } else {
            return true;
        }
    });

它返回一个没有该对象的数组。

希望能帮助到你。