Добавление / удаление элементов из объекта JavaScript с помощью jQuery

Question

У меня есть объект 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?Клиент хочет, чтобы этот список был динамически изменяемым.

Answer 1

Во-первых, ваш цитируемый код не 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"}
]};

Answer 2

Соединение хорошо, все объясняют соединение, поэтому я не объяснил это.Вы также можете использовать ключевое слово delete в JavaScript, это хорошо.Вы также можете использовать $. Grep также для управления этим с помощью jQuery.

Путь jQuery:

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

УДАЛИТЬ Путь:

delete data.items[0]

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

Answer 3

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

Answer 4

Это вовсе не 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);

Answer 5

Ну, это просто объект javascript, поэтому вы можете манипулировать data.items так же, как и обычным массивом.Если вы сделаете:

data.items.pop();

ваш массив items будет на 1 единицу короче.

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

Возвращает массив безэтот объект.

Надеюсь, это поможет.

Answer 7

Попробуйте

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

Answer 8

Не усложняйте:)

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

Надеюсь, это поможет!