Добавление/удаление элементов из объекта 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

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

Путь jQuery:

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

Удалить путь:

delete data.items[0]

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

Answer 3

Если вы используете jQuery, вы можете использовать функцию Extend для добавления новых элементов.

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

Держите все просто :)

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

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

Answer 8

Пытаться

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