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

Ответ 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"}
]};

Ответ 2

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

Путь jQuery:

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

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

delete data.items[0]

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

Ответ 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}};

Ответ 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);

Ответ 5

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

data.items.pop();

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

Ответ 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;
        }
    });

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

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

Ответ 7

Сохраняйте вещи простыми :)

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

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

Ответ 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);