objetos - Agregar/eliminar elementos de un objeto de JavaScript con jQuery

lista de objetos javascript

Question

Tengo un objeto 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é usando jQuery? El cliente quiere que esta lista sea dinámicamente modificable.

Answer 1

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

Es trabajador para mi.

  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.

Answer 2

Bueno, es solo un objeto javascript, por lo que puedes manipular data.items como lo harías con una matriz ordinaria. Si lo haces:

data.items.pop();

su matriz de items será 1 artículo más corto.

Answer 3

En primer lugar, su código entre comillas no es 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 una id , name y type ).

No necesita ni desea 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 método de 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 de los elementos que eliminó.

Agregar en el medio:

splice realmente agrega y elimina. La firma del método de splice es:

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

• index - el índice en el cual comenzar a hacer cambios
• num_to_remove - comenzando con ese índice, elimine estas muchas entradas
• addN - ... y luego inserte estos elementos

Entonces puedo agregar un artículo en la 3ra posición así:

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

Lo que dice es: comenzando en el índice 2, elimine cero artículos, y luego inserte este siguiente ítem. El resultado es 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"}
]};

Answer 4

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

La razón por la que no se puede encontrar información sobre la manipulación de JSON mediante jQuery se debe a que jQuery no tiene nada que pueda hacer eso y, en general, 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 tienes es simplemente un objeto que contiene una matriz, por lo que puedes usar todo el conocimiento que ya tienes. Simplemente use data.items para 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);

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

Splice es bueno, todos explican el empalme, así que no lo expliqué. También puede usar delete keyword en JavaScript, es bueno. Puede usar $.grep también para manipular esto usando jQuery.

La jQuery Way:

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 pesada. Splice crea una nueva matriz, si tienes un gran tamaño de matriz, entonces puede ser problemático. borrar es útil en algún momento, después de eliminar si busca la longitud de la matriz, entonces no hay cambio en la longitud allí. Entonces, úsalo sabiamente