Aggiunta / rimozione di elementi da un object JavaScript con jQuery

Ho un object Javascript come segue:

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"} ]}; 

Se volessi aggiungere / rimuovere elementi a questa lista, come dovrei farlo usando jQuery? Il client vuole che questa lista sia modificabile dynamicmente.

Prima di tutto, il tuo codice citato non è JSON. Il tuo codice è notazione letterale dell’object JavaScript. JSON è un sottoinsieme di quello progettato per semplificare l’analisi.

Il tuo codice definisce un object ( data ) contenente una matrice ( items ) di oggetti (ognuno con un id , name e type ).

Non hai bisogno o vuoi jQuery per questo, solo JavaScript.

Aggiungere un articolo:

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

Ciò si aggiunge alla fine. Vedi sotto per aggiungere nel mezzo.

Rimozione di un articolo:

Ci sono diversi modi. Il metodo di splice è il più versatile:

 data.items.splice(1, 3); // Removes three items starting with the 2nd, // ("Witches of Eastwick", "X-Men", "Ordinary People") 

splice modifica l’array originale e restituisce una matrice degli elementi che hai rimosso.

Aggiunta al centro:

splice fa sia l’aggiunta che la rimozione. La firma del metodo splice è:

 removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]); 
  • index – l’indice al quale iniziare a fare cambiamenti
  • num_to_remove – a partire da quell’indice, rimuovi tutte queste voci
  • addN – … e quindi inserire questi elementi

Quindi posso aggiungere un object nella 3a posizione in questo modo:

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

Quello che dice è: a partire dall’indice 2, rimuovere zero elementi, e quindi inserire questo elemento seguente. Il risultato è simile a questo:

 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"} ]}; 

Puoi rimuoverne alcuni e aggiungerne alcuni contemporaneamente:

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

... che significa: a partire dall'indice 1, rimuovere tre voci, quindi aggiungere queste due voci. Quale risulta in:

 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"} ]}; 

La giuntura è buona, tutti spiegano la giuntura quindi non l’ho spiegata. Puoi anche utilizzare la parola chiave delete in JavaScript, va bene. Puoi usare $ .grep anche per manipolarlo usando jQuery.

La via jQuery:

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

Modo DELETE:

 delete data.items[0] 

Per aggiungere PUSH è meglio la giunzione, perché la giunzione è una funzione pesante. La giuntura crea un nuovo array, se si dispone di una dimensione enorme di array, potrebbe essere problematico. l’eliminazione è utile un po ‘, dopo l’eliminazione se si cerca la lunghezza dell’array quindi non vi è alcun cambiamento di lunghezza lì. Quindi usalo saggiamente.

Se si utilizza jQuery, è ansible utilizzare la funzione di estensione per aggiungere nuovi elementi.

 var olddata = {"fruit":{"apples":10,"pears":21}}; var newdata = {}; newdata['vegetables'] = {"carrots": 2, "potatoes" : 5}; $.extend(true, olddata, newdata); 

Questo genererà:

 {"fruit":{"apples":10,"pears":21}, "vegetables":{"carrots":2,"potatoes":5}}; 

Questo non è affatto JSON, sono solo oggetti Javascript. JSON è una rappresentazione di testo di dati, che utilizza un sottoinsieme della syntax di Javascript.

La ragione per cui non riesci a trovare alcuna informazione su come manipolare JSON usando jQuery è perché jQuery non ha nulla che possa farlo, e generalmente non è fatto affatto. Si manipolano i dati sotto forma di oggetti Javascript e quindi si trasformano in una stringa JSON se questo è ciò che è necessario. (jQuery però ha dei metodi per la conversione).

Quello che hai è semplicemente un object che contiene un array, quindi puoi usare tutta la conoscenza che hai già. Basta usare data.items per accedere alla matrice.

Ad esempio, per aggiungere un altro elemento all’array utilizzando i valori dinamici:

 // 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); 

Beh, è ​​solo un object javascript, quindi puoi manipolare data.items proprio come faresti con un normale array. Se fate:

 data.items.pop(); 

il tuo array di items sarà più corto di 1 elemento.

Aggiunta di un object in un array json

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

Rimozione di un object da un json

Funziona per me.

  arrList = $.grep(arrList, function (e) { if(e.worker_id == worker_id) { return false; } else { return true; } }); 

Restituisce un array senza quell’object.

Spero che sia d’aiuto.