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

IT技术 javascript jquery object-literal
2021-01-29 04:20:32

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

6个回答

首先,您引用的代码不是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 开始,删除零个项目,然后插入以下项目。结果如下所示:

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”;我该怎么做?
2021-03-15 04:20:32
如果 JSON 对象需要推送到 json 对象而不是数组,请使用 $.exetend,正如 Peter Drinnan 在下面stackoverflow.com/a/17976034/2466650 中提到的
2021-03-17 04:20:32
@TJCrowder,是能够去除id = 5,也可以将更新nameid=6Toy
2021-03-20 04:20:32
在进行推送时,我总是得到“......没有方法推送”。嗯……不知道怎么回事……
2021-03-22 04:20:32
@HudsonAtwell:data.items是一个数组。数组有一个length属性。:-)
2021-03-25 04:20:32

Splice很好,大家解释 splice 所以我就不解释了。你也可以在 JavaScript 中使用delete关键字,这很好。您也可以使用$.grep来使用 jQuery 操作它。

jQuery 方式:

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

删除方式:

delete data.items[0]

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

你在最后一段想说什么?雾蒙蒙的,什么都看不懂。
2021-03-27 04:20:32
点赞!因为它不删除只是创建未定义的相关索引
2021-04-11 04:20:32

如果您使用 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;
        }
    });

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

希望能帮助到你。