Добавление / удаление элементов из объекта 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 лучше всего подходит склейка, потому что склейка - это тяжеловесная функция. Splice создает новый массив, если у вас огромный размер массива, это может вызвать проблемы. Удаление иногда полезно, после удаления, если вы ищете длину массива, то там нет изменения длины. Так что используйте это с умом.

Если вы используете 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);