使用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是为简化解析而设计的子集。

您的代码定义了一个对象（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"}
]};

接头很好，每个人都可以说明接头，所以我没有解释。您也可以在JavaScript中使用delete关键字，这很好。您也可以使用$ .grep使用jQuery来操纵它。

jQuery方式：

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

删除方式：

delete data.items[0]

对于添加PUSH来说，拼接效果更好，因为拼接具有很重的功能。拼接创建一个新的数组，如果数组很大，那么可能会很麻烦。删除有时很有用，在删除后，如果您要查找数组的长度，则那里的长度没有变化。因此，请明智地使用它。

如果使用的是jQuery，则可以使用扩展功能来添加新项目。

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

那根本不是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);

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

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

希望能帮助到你。

好吧，这只是一个javascript对象，因此您可以data.items像处理普通数组一样进行操作。如果您这样做：

data.items.pop();

您的items阵列将缩短1个项目。

保持简单：)

var my_form_obj = {};
my_form_obj.name = "Captain America";
my_form_obj.weapon = "Shield";

希望这可以帮助！

尝试

data.items.pop();
data.items.push({id: "7", name: "Matrix", type: "adult"});

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

data.items.pop();
data.items.push({id: "7", name: "Matrix", type: "adult"});

console.log(data);