Tengo un objeto JavaScript 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 usando jQuery? El cliente quiere que esta lista sea modificable dinámicamente.
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 eso diseñado para facilitar el análisis.
Tu 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"}
);
Que se añade al final. Ver abajo para añadir en el medio.
Quitar un elemento:
Hay varias formas. El método 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 que has eliminado.
Añadir en el medio:
splice
en realidad hace tanto la adición como la eliminación. La firma del método splice
es:
removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
index
- el índice en el que se empiezan a hacer los cambiosnum_to_remove
- empezando por ese índice, eliminar esta cantidad de entradasaddN
- ...y luego insertar estos elementosAsí 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 esto dice es: Empezando por el índice 2, eliminar cero elementos, y luego insertar 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 eliminar 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: "4", name: "Ordinary People", type: "drama"},
{id: "5", name: "Billy Elliot", type: "drama"},
{id: "6", name: "Toy Story", type: "children"}
]};
Eso no es JSON en absoluto, sólo son 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 puede 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 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);