Додавання / видалення елементів з об’єкта JavaScript за допомогою jQuery

У мене є об’єкт 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"}
]};

Зрощування добре, все пояснити стик , так що я не пояснити. Ви також можете використовувати ключове слово delete у JavaScript, це добре. Ви також можете використовувати $ .grep, щоб маніпулювати цим за допомогою jQuery.

Шлях jQuery:

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

Видалити спосіб:

delete data.items[0]

Для додавання PUSH краще сплайсинг, оскільки сплайс є важкозваженою функцією. Сплайсинг створити новий масив, якщо у вас величезний розмір масиву, це може бути клопітно. delete колись корисно, після видалення, якщо ви шукаєте довжину масиву, тоді довжина там не змінюється. Тож використовуйте це з розумом.

Якщо ви використовуєте 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.

Причиною того, що ви не можете знайти жодної інформації про маніпулювання JSON за допомогою jQuery, є те, що 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);