Agregar / eliminar elementos de un objeto JavaScript con jQuery

Tengo un objeto de JavaScript de la siguiente manera:

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"}
]};

Si quisiera agregar / eliminar elementos a esta lista, ¿cómo lo haría usando jQuery? El cliente desea que esta lista se pueda modificar dinámicamente.

En primer lugar, su código entre comillas no es JSON. Su código es una notación literal de objeto JavaScript. JSON es un subconjunto del diseñado para facilitar el análisis.

Su código define un objeto ( data) que contiene una matriz ( items) de objetos (cada uno con una id, namey type).

No necesitas ni quieres jQuery para esto, solo JavaScript.

Agregar un artículo:

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

Eso se suma al final. Vea a continuación para agregar en el medio.

Eliminar un artículo:

Hay varias formas. El splicemétodo es el más versátil:

data.items.splice(1, 3); // Removes three items starting with the 2nd,
                         // ("Witches of Eastwick", "X-Men", "Ordinary People")

splice modifica la matriz original y devuelve una matriz de los elementos que eliminó.

Añadiendo en el medio:

spliceen realidad, agrega y quita. La firma del splicemétodo es:

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);

• index - el índice en el que comenzar a realizar cambios
• num_to_remove - comenzando con ese índice, elimine tantas entradas
• addN - ... y luego inserta estos elementos

Entonces puedo agregar un elemento en la tercera posición como este:

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

Lo que dice es: comenzando en el índice 2, elimine cero elementos y luego inserte el siguiente elemento. El resultado se ve así:

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"}
]};

Puede eliminar algunos y agregar algunos a la vez:

data.items.splice(1, 3,
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"}
);

... lo que significa: comenzando en el índice 1, elimine tres entradas, luego agregue estas dos entradas. Lo que resulta en:

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"}
]};

El empalme es bueno, todos explican el empalme, así que no lo expliqué. También puede usar eliminar la palabra clave en JavaScript, es bueno. Puede usar $ .grep también para manipular esto usando jQuery.

La forma jQuery:

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

BORRAR Manera:

delete data.items[0]

Para agregar PUSH es mejor el empalme, porque el empalme es una función de peso pesado. Empalme cree una nueva matriz, si tiene un tamaño enorme de matriz, puede ser problemático. eliminar es útil en algún momento, después de eliminar si busca la longitud de la matriz, entonces no hay ningún cambio en la longitud allí. Así que utilícelo sabiamente.

Si está usando jQuery, puede usar la función extender para agregar nuevos elementos.

var olddata = {"fruit":{"apples":10,"pears":21}};

var newdata = {};
newdata['vegetables'] = {"carrots": 2, "potatoes" : 5};

$.extend(true, olddata, newdata);

Esto generará:

{"fruit":{"apples":10,"pears":21}, "vegetables":{"carrots":2,"potatoes":5}};

Eso no es JSON en absoluto, son solo objetos Javascript. JSON es una representación de texto de datos que utiliza un subconjunto de la sintaxis de Javascript.

La razón por la que no puede encontrar información sobre la manipulación de JSON con jQuery es porque jQuery no tiene nada que pueda hacer eso y, por lo general, no se hace en absoluto. Manipula los datos en forma de objetos Javascript y luego los convierte en una cadena JSON si eso es lo que necesita. (Sin embargo, jQuery tiene métodos para la conversión).

Lo que tiene es simplemente un objeto que contiene una matriz, por lo que puede usar todo el conocimiento que ya tiene. Solo use data.itemspara acceder a la matriz.

Por ejemplo, para agregar otro elemento a la matriz usando valores dinámicos:

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

Agregar un objeto en una matriz json

var arrList = [];
var arr = {};   
arr['worker_id'] = worker_id;
arr['worker_nm'] = worker_nm;
arrList.push(arr);

Eliminar un objeto de un json

Trabaja para mí.

  arrList = $.grep(arrList, function (e) { 

        if(e.worker_id == worker_id) {
            return false;
        } else {
            return true;
        }
    });

Devuelve una matriz sin ese objeto.

Espero eso ayude.

Bueno, es solo un objeto javascript, por lo que puede manipularlo data.itemscomo lo haría con una matriz ordinaria. Si lo haces:

data.items.pop();

su itemsmatriz será 1 elemento más corta.

Mantén las cosas simples :)

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

¡Espero que esto ayude!

Tratar

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