Adición/eliminación de elementos de datos JSON con jQuery

Question

Tengo un objeto JSON como sigue:

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 a esta lista, ¿cómo iba a ir sobre ella utilizando jQuery? Sé que puedo hacerlo fácilmente si simplemente utilizamos una matriz, pero el programador anterior ya creó el código usando JSON, y ahora el cliente cambió de opinión en el último minuto y quiere que esta lista sea modificable dinámicamente. Quiero ahorrar tiempo al volver a escribir todo el código para usar matrices en lugar de JSON, así que me pregunto si alguien sabe cómo lograr esto, ya que parece que no puedo encontrar mucha información sobre cómo manipular JSON con JQuery en cualquier lugar En Internet.

¡Muchas gracias!

Answer 1

En primer lugar, su código entre comillas es no JSON. Su código es la notación literal del objeto de JavaScript. JSON es un subconjunto de eso diseñado para un análisis más fácil.

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

No necesita ni desea jQuery para esto, solo JavaScript.

Adición de un artículo:

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

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

Extracción de un artículo:

Hay varias maneras. 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 la matriz original, y devuelve una matriz con los artículos que haya retirado.

Adición en el medio:

splice hace realmente tanto la adición y eliminación. La firma del método es splice:

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

• index - el índice en el cual empezar a hacer cambios
• num_to_remove - a partir de ese índice, eliminar esta cantidad de entradas
• addN - ...y luego introduce los elementos

Así que puede agregar un elemento en la tercera posición de la siguiente manera:

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

Lo que dice es: a partir de índice 2, retire cero elementos, y luego insertar este siguiente ít. El resultado es el siguiente:

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 añadir un poco a la vez:

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

... que significa: Comenzando en el índice 1, retirar tres entradas, a continuación, 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"} 
]}; 

Answer 2

Bueno, es solo un objeto javascript, por lo que puede manipular data.items como lo haría con una matriz normal. Si lo hace:

data.items.pop(); 

la matriz items será de 1 punto más corto.

Answer 3

Eso no es JSON para nada, solo son objetos de 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 se puede encontrar información sobre cómo manipular JSON utilizando jQuery es porque jQuery no tiene nada que pueda hacer eso, y generalmente no se hace. Puede manipular los datos en forma de objetos JavaScript y luego convertirlos en una cadena JSON si eso es lo que necesita. (jQuery tiene métodos para la conversión, sin embargo)

Lo que tiene es simplemente un objeto que contiene una matriz, por lo que puede utilizar todo el conocimiento que ya tiene. Simplemente use data.items para acceder a la matriz.

Por ejemplo, para añadir otro elemento a la matriz mediante 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); 

Answer 4

Splice es bueno, todo el mundo explicar el empalme de modo que no me lo explico. También puede usar eliminar la palabra clave en JavaScript, es bueno. También puede usar $.grep para manipular esto usando jQuery.

El jQuery Vía:

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

Camino Eliminar:

delete data.items[0] 

para añadir PUSH es mejor el empalme, porque es función ponderada de empalme pesada. Splice crea una nueva matriz, si tienes un gran tamaño de matriz, entonces puede ser problemático. borrar es alguna vez útil, después de eliminar si busca la longitud de la matriz, entonces no hay cambio en la longitud allí. Entonces, úsalo sabiamente

Answer 5

Si está utilizando 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}}; 

Answer 6

Adición de un objeto en una matriz JSON

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

Extracción de un objeto de un JSON

Se trabajador 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 que ayude.