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