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

80
javascript jquery object-literal

6 ответов

во-первых, ваш цитируемый код не в формате JSON. Ваш код-это буквенная нотация объекта JavaScript. JSON является подмножеством, предназначенным для более легкого синтаксического анализа.

ваш код определяет объект (data), содержащий массив (items) объектов (каждый с id, name и type).

вам не нужен или не нужен jQuery для этого, просто JavaScript.

добавить пункт:

data.items.push(
    {id: "7", name: "Douglas Adams", type: "comedy"}
);

это добавляет к концу. См. ниже для добавления в середине.

удаление элемента:

есть несколько способов. The 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"}
]};
207

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

путь jQuery:

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

удалить так: 

delete data.items[0]

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

19

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

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

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

data.items.pop();

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

3

добавление объекта в массив 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;
        }
    });

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

надеюсь, что это помогает.

2