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

82

我有一个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添加/删除此列表中的项目,我该怎么做?客户希望这个列表能够动态修改。


2
这不是JSON。这是一个对象字面量:http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json(*对JSON对象的抨击仍在继续....*) - Felix Kling
4
@Matt: 确实。JSON 是一种文本数据格式。即使将引用的代码放在字符串中(因为 JSON 要求属性名使用双引号),它也不会成为JSON。 - T.J. Crowder
6
谢谢您启发我。虽然看起来确实像是一个JSON对象!再次感谢! - Bug Magnet
3
@Bug: {items: []} 的 JSON 表示应该是 {"items": []}。虽然它们非常相似,但并不完全相同(再次提醒,JSON 是您正在使用的对象字面量符号的子集)。当您反序列化 JSON 时,结果是一个对象图形(例如,在 JavaScript 中,它是一个 JavaScript 对象)。 - T.J. Crowder
8个回答

224

首先,你引用的代码不是JSON。你的代码是JavaScript对象字面量表示法。 JSON是该表示法的子集,旨在更轻松地进行解析。

你的代码定义了一个包含一个对象(data)和该对象的数组(items)的对象数组(每个对象都有idnametype)。

这并不需要使用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 - ...然后插入这些元素

因此,我可以像这样在第三个位置添加一个项目:

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

这意味着从索引2开始,删除0个项目,然后插入以下项目。结果如下所示:

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

你好,如果我想确定对象数据中的项目数量,以便在推送新项目时动态定义“id”,我该怎么做? - Hudson Atwell
@HudsonAtwell:data.items是一个数组。数组有一个length属性。 :-) - T.J. Crowder
在执行 push 操作时,我总是会收到“...没有 push 方法”的错误提示。嗯...无法弄清楚出了什么问题... - Sliq
@T.J.Crowder,能否删除id = 5,并将id = 6的更新名称更改为Toy - Mourya
如果JSON对象需要推送到JSON对象而不是数组中,请使用Peter Drinnan在下面提到的$.exetend方法。https://dev59.com/DG855IYBdhLWcg3wGQRM#17976034 - Sai
如何删除所有? - James Wierzba

19

Splice是一个好方法,大家都在解释splice,所以我就不再解释了。 你也可以使用JavaScript中的delete关键字,它很好用。 你还可以使用jQuery中的$.grep方法来操作它。

jQuery的方式:

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

删除方式:

delete data.items[0]

对于添加元素PUSH比splice更好,因为splice是重量级函数。如果你有一个非常大的数组,则使用splice可能会带来麻烦,因为它会创建一个新数组。

delete有时也很有用,如果你在删除后想查看数组的长度,则其长度不会发生变化,所以要明智地使用它。


你在最后一段想表达什么?太含糊了,我一个字也没听懂。 - Decebal
1
代码不要删除!因为这并不是删除,而是将相关索引变为未定义。 - user4005632

13

如果你正在使用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}};

8

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

6

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

它返回一个没有该对象的数组。 希望这有所帮助。

3

好的,这只是一个JavaScript对象,因此您可以像操作普通数组一样操纵data.items。如果您这样做:

data.items.pop();

你的items数组将会缩短1个项目。


1
保持简单:)
var my_form_obj = {};
my_form_obj.name = "Captain America";
my_form_obj.weapon = "Shield";

希望这能帮到你!

0

尝试

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接