Agregar / eliminar elementos de un objeto JavaScript con jQuery

82

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.

Imán de insectos
fuente
2
Esto no es JSON. Este es un objeto literal: benalman.com/news/2010/03/theres-no-such-thing-as-a-json ( y la cruzada contra los objetos JSON continúa ... )
Felix Kling
4
@ Matt: De hecho. Bueno, JSON es un formato de datos textuales. Y el código entre comillas no sería JSON incluso si estuviera en una cadena (ya que JSON requiere comillas dobles en los nombres de propiedad).
TJ Crowder
6
Gracias por iluminarme. ¡Seguro que parece un objeto JSON! ¡Gracias de nuevo!
Bug Magnet
3
Notación JSON para: @Bug {items: []}sería el siguiente: {"items": []}. No es exactamente lo mismo (solo muy similar; de nuevo, JSON es un subconjunto de lo que estás usando, que es la notación literal de objeto). Cuando deserializa JSON, el resultado es un gráfico de objeto (por ejemplo, en JavaScript, es un objeto de JavaScript).
TJ Crowder

Respuestas:

220

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"}
]};
TJ Crowder
fuente
Hola, si quisiera determinar la cantidad de elementos en los datos del objeto para poder definir dinámicamente 'id' al enviar nuevos elementos; ¿Como podría hacerlo?
Hudson Atwell
@HudsonAtwell: data.itemses una matriz. Las matrices tienen una lengthpropiedad. :-)
TJ Crowder
Cuando hago el empujón siempre obtengo "... no tiene método de empujar". Hmm ... No puedo entender qué está mal ...
Sliq
@TJCrowder, es posible quitar id = 5y puede también la actualización namede id=6aToy
Mourya
si el objeto JSON necesita empujar al objeto json en lugar de usar una matriz, use $ .exetend como lo menciona Peter Drinnan a continuación stackoverflow.com/a/17976034/2466650
Sai
19

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.

Imrul
fuente
¿Qué intentas decir en el último párrafo? Hay tanta niebla que no entendí nada.
Decebal
1
vode down! para que no se elimine, solo haga un índice relacionado indefinido
13

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}};
Peter Drinnan
fuente
8

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);
Guffa
fuente
5

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.

Siva Anand
fuente
3

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.

Normando espinoso
fuente
1

Mantén las cosas simples :)

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

¡Espero que esto ayude!

Talha
fuente
0

Tratar

data.items.pop();
data.items.push({id: "7", name: "Matrix", type: "adult"});

Kamil Kiełczewski
fuente