82 votos

Añadir/eliminar elementos de datos JSON con JQuery

Tengo un objeto JSON como el siguiente:

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 añadir/eliminar elementos de esta lista, ¿cómo lo haría utilizando JQuery? Sé que puedo hacer esto con bastante facilidad si simplemente usamos un Array, pero el programador anterior ya construyó el código usando JSON, y ahora el cliente cambió de opinión en el último minuto y quiere que esta lista sea dinámicamente modificable. Quiero ahorrarme el tiempo de reescribir todo el código para usar arrays en lugar de JSON, así que me pregunto si alguien sabe de una manera de lograr esto, ya que parece que no puedo encontrar mucha información sobre cómo manipular JSON con JQuery en cualquier lugar de Internet.

Muchas gracias.

219voto

T.J. Crowder Puntos 285826

En primer lugar, su código citado es no JSON. Su código es la notación literal de objetos de JavaScript. JSON es un subconjunto de éste diseñado para facilitar el análisis sintáctico.

Su código define un objeto ( data ) que contiene un Array ( items ) de objetos (cada uno con un id , name y type ).

No necesitas ni quieres jQuery para esto, sólo JavaScript.

Añadir un elemento:

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

Eso se suma al final. Ver abajo para añadir en el medio.

Eliminar un elemento:

Hay varias maneras. El splice 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 el Array original, y devuelve un Array con los elementos eliminados.

Añadiendo en el medio:

splice en realidad hace tanto la adición como la eliminación. La firma del splice método es:

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
  • index - el índice en el que empezar a hacer cambios
  • num_to_remove - comenzando con ese índice, eliminar esta cantidad de entradas
  • addN - ...y luego insertar estos elementos

Así que puedo añadir un elemento en la 3ª posición de esta manera:

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

Lo que dice es: Empezando por el índice 2, elimine cero elementos, y luego inserte este elemento siguiente. 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"}
]};

Puedes quitar algunos y añadir otros 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: Empezando por el índice 1, eliminar tres entradas, y luego añadir 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: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

19voto

Imrul Puntos 1486

Empalme es bueno, todo el mundo explica el empalme así que no lo expliqué. También puedes usar borrar en JavaScript, es bueno. Puede utilizar $.grep también para manipular esto usando jQuery.

El camino de jQuery :

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

Borrar camino:

delete data.items[0]

Para añadir PUSH es mejor que el empalme, porque el empalme es una función pesada. El empalme crea un nuevo Array, si usted tiene un gran tamaño de Array entonces puede ser problemático. delete es a veces útil, después de borrar si buscas la longitud del Array entonces no hay cambio en la longitud allí. Así que úselo sabiamente.

13voto

Peter Drinnan Puntos 1123

Si está utilizando jQuery puede utilizar la función extend para añadir 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}};

8voto

Guffa Puntos 308133

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

La razón por la que no puedes encontrar ninguna información sobre la manipulación de JSON usando jQuery es porque jQuery no tiene nada que pueda hacer eso, y generalmente no se hace. Usted 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 tienes es simplemente un objeto que contiene un Array, así que puedes usar todo el conocimiento que ya tienes. Sólo tienes que utilizar data.items para acceder al Array.

Por ejemplo, para añadir otro elemento al Array utilizando 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);

3voto

Spiny Norman Puntos 5699

Bueno, es sólo un objeto de javascript, por lo que puede manipular data.items como lo harías con un Array ordinario. Si lo haces:

data.items.pop();

su items La matriz será 1 elemento menos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X