Thêm / xóa các mục khỏi một đối tượng JavaScript bằng jQuery

Tôi có một đối tượng JavaScript như sau:

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

Nếu tôi muốn thêm / bớt các mục vào danh sách này, tôi sẽ sử dụng jQuery như thế nào? Khách hàng muốn danh sách này có thể sửa đổi động.

Trước hết, mã được trích dẫn của bạn không phải là JSON. Mã của bạn là ký hiệu theo nghĩa đen của đối tượng JavaScript. JSON là một tập hợp con được thiết kế để phân tích cú pháp dễ dàng hơn.

Mã của bạn định nghĩa một đối tượng ( data) có chứa một mảng ( items) của đối tượng (mỗi với một id, namevà type).

Bạn không cần hoặc muốn jQuery cho việc này, chỉ cần JavaScript.

Thêm một mục:

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

Điều đó thêm vào phần cuối. Xem bên dưới để thêm vào giữa.

Xóa một mục:

Có một số cách. Các splicephương pháp là linh hoạt nhất:

data.items.splice(1, 3); // Removes three items starting with the 2nd,
                         // ("Witches of Eastwick", "X-Men", "Ordinary People")

splice sửa đổi mảng ban đầu và trả về một mảng các mục bạn đã xóa.

Thêm vào giữa:

splicethực sự có cả việc thêm và bớt. Chữ ký của splicephương thức là:

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

• index - chỉ mục bắt đầu thực hiện thay đổi
• num_to_remove - bắt đầu với chỉ mục đó, xóa nhiều mục nhập này
• addN - ... và sau đó chèn các phần tử này

Vì vậy, tôi có thể thêm một mục ở vị trí thứ 3 như sau:

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

Điều đó có nghĩa là: Bắt đầu từ chỉ mục 2, loại bỏ không mục nào, rồi chèn mục sau đây. Kết quả trông như thế này:

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

Bạn có thể xóa một số và thêm một số cùng một lúc:

data.items.splice(1, 3,
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"}
);

... có nghĩa là: Bắt đầu từ chỉ mục 1, loại bỏ ba mục nhập, sau đó thêm hai mục nhập này. Kết quả là:

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

Splice có tốt không, mọi người giải thích về splice nên mình không giải thích. Bạn cũng có thể sử dụng từ khóa xóa trong JavaScript, nó tốt. Bạn cũng có thể sử dụng $ .grep để sử dụng jQuery.

Cách jQuery:

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

XÓA Cách:

delete data.items[0]

Đối với Thêm PUSH thì mối nối tốt hơn, vì mối nối là chức năng có trọng số nặng. Splice tạo một mảng mới, nếu bạn có kích thước lớn của mảng thì điều đó có thể rắc rối. Xoá đôi khi hữu ích, sau khi xoá nếu bạn tìm độ dài của mảng thì không có thay đổi về độ dài ở đó. Vì vậy, hãy sử dụng nó một cách khôn ngoan.

Nếu bạn đang sử dụng jQuery, bạn có thể sử dụng chức năng mở rộng để thêm các mục mới.

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

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

$.extend(true, olddata, newdata);

Điều này sẽ tạo ra:

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

Đó hoàn toàn không phải là JSON, nó chỉ là các đối tượng Javascript. JSON là một biểu diễn văn bản của dữ liệu, sử dụng một tập hợp con của cú pháp Javascript.

Lý do mà bạn không thể tìm thấy bất kỳ thông tin nào về thao tác JSON bằng jQuery là bởi vì jQuery không có gì có thể làm được điều đó và nó thường không được thực hiện. Bạn thao tác dữ liệu dưới dạng các đối tượng Javascript, sau đó biến nó thành một chuỗi JSON nếu đó là những gì bạn cần. (jQuery không có các phương thức để chuyển đổi.)

Những gì bạn có chỉ đơn giản là một đối tượng có chứa một mảng, vì vậy bạn có thể sử dụng tất cả kiến ​​thức mà bạn đã có. Chỉ cần sử dụng data.itemsđể truy cập mảng.

Ví dụ: để thêm một mục khác vào mảng bằng cách sử dụng các giá trị động:

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

Thêm một đối tượng trong một mảng json

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

Xóa một đối tượng khỏi json

Nó làm việc cho tôi.

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

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

Nó trả về một mảng không có đối tượng đó.

Hy vọng nó giúp.

Chà, nó chỉ là một đối tượng javascript, vì vậy bạn có thể thao tác data.itemsgiống như bạn làm với một mảng thông thường. Nếu bạn làm:

data.items.pop();

itemsmảng của bạn sẽ ngắn hơn 1 mục.

Giữ mọi thứ đơn giản :)

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

Hi vọng điêu nay co ich!

Thử

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