Aggiunta di un nuovo elemento di matrice a un oggetto JSON


120

Ho un oggetto in formato JSON che ho letto da un file JSON che ho in una variabile chiamata teamJSON, che assomiglia a questo:

 {"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}

Voglio aggiungere un nuovo elemento all'array, come

{"teamId":"4","status":"pending"}

per finire con

{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"},{"teamId":"4","status":"pending"}]}

prima di riscrivere nel file. Qual è un buon modo per aggiungere al nuovo elemento? Mi sono avvicinato ma tutte le virgolette doppie sono state evitate. Ho cercato una buona risposta su SO, ma nessuna copre questo caso. Qualsiasi aiuto è apprezzato.


6
yourObj.theTeam.push({"teamId":"4","status":"pending"});
PSL

2
"JSON" non è un oggetto, è una notazione.
Brad Christie

1
Quando leggi l'oggetto JSON dal file, viene interpretato come JSON o una stringa? Se è una stringa, devi prima analizzare la stringa come JSON, quindi puoi fare ciò che suggeriscono gli altri commenti e risposte.
Marco

3
@Charles leggi il tuo titolo e poi riesamina il tuo commento.
Brad Christie

1
@ CharlesWyke-Smith Che tipo è la tua teamJSONvariabile? È una stringa JSON, ovvero '{"theTeam":[...]}'un oggetto letterale effettivo? Suggerimento: usaconsole.log(typeof teamJSON)
Phil

Risposte:


233

JSON è solo una notazione ; per apportare la modifica desiderata parsein modo da poter applicare le modifiche a un oggetto JavaScript nativo , quindi di stringifynuovo a JSON

var jsonStr = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

var obj = JSON.parse(jsonStr);
obj['theTeam'].push({"teamId":"4","status":"pending"});
jsonStr = JSON.stringify(obj);
// "{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"},{"teamId":"4","status":"pending"}]}"

16
+1 per indicare che questo deve essere analizzato prima in un oggetto per essere manipolato.
Brad Christie

3
Ha detto che ha già l'oggetto in una variabile denominata teamJSON. Non viene mai menzionata una stringa
Phil

6
@Phil: Se è JSON, è una stringa. Se non lo è, non è JSON.
user2736012

1
Le virgolette sfuggite in realtà mi chiedono se il JSON sia stato codificato due volte.
user2736012

24
Paul, questa è una risposta molto costruttiva. Affronta la carenza nella dichiarazione del problema senza sminuire il poster originale. Delinea più chiaramente i confini tra il funzionamento sugli oggetti javascript e la rappresentazione del testo JSON di tali oggetti. Penso che sia essenziale per capire che una volta che il JSON è stato analizzato, stiamo operando su oggetti javascript puri - il fatto che originariamente provenissero da JSON è irrilevante. Ad ogni modo, leggere la tua risposta è stata una boccata d'aria fresca dopo tutti i commenti sprezzanti che hanno fatto sentire l'OP come un idiota.
Larry Hector

20
var Str_txt = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

Se vuoi aggiungere l'ultima posizione, usa questo:

var parse_obj = JSON.parse(Str_txt);
parse_obj['theTeam'].push({"teamId":"4","status":"pending"});
Str_txt = JSON.stringify(parse_obj);
Output //"{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"},{"teamId":"4","status":"pending"}]}"

Se vuoi aggiungere in prima posizione, usa il seguente codice:

var parse_obj = JSON.parse(Str_txt);
parse_obj['theTeam'].unshift({"teamId":"4","status":"pending"});
Str_txt = JSON.stringify(parse_obj);
Output //"{"theTeam":[{"teamId":"4","status":"pending"},{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}"

Chiunque voglia aggiungere in una certa posizione di un array prova questo:

parse_obj['theTeam'].splice(2, 0, {"teamId":"4","status":"pending"});
Output //"{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"4","status":"pending"},{"teamId":"3","status":"member"}]}"

Il blocco di codice sopra aggiunge un elemento dopo il secondo elemento.


1

Per prima cosa dobbiamo analizzare l'oggetto JSON e quindi possiamo aggiungere un elemento.

var str = '{"theTeam":[{"teamId":"1","status":"pending"},
{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

var obj = JSON.parse(str);
obj['theTeam'].push({"teamId":"4","status":"pending"});
str = JSON.stringify(obj);

Infine abbiamo JSON.stringify l' obj di nuovo in JSON


Cosa succede se il nostro JSON non ha un nome come theTeam, ma contiene solo nodi con gli elementi teamId e status? quindi il mio sarebbe: var str = '[{"teamId": "1", "status": "pending"}, {"teamId": "2", "status": "member"}, {"teamId ":" 3" , "status": "membro"}] ';
Shafique

0

Ad esempio, ecco un elemento come un pulsante per aggiungere un articolo al carrello e attributi appropriati per il salvataggio in localStorage.

'<a href="#" cartBtn pr_id='+e.id+' pr_name_en="'+e.nameEn+'" pr_price="'+e.price+'" pr_image="'+e.image+'" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>Add to cart</a>'

var productArray=[];


$(document).on('click','[cartBtn]',function(e){
  e.preventDefault();
  $(this).html('<i class="fa fa-check"></i>Added to cart');
  console.log('Item added ');
  var productJSON={"id":$(this).attr('pr_id'), "nameEn":$(this).attr('pr_name_en'), "price":$(this).attr('pr_price'), "image":$(this).attr('pr_image')};


  if(localStorage.getObj('product')!==null){
    productArray=localStorage.getObj('product');
    productArray.push(productJSON);  
    localStorage.setObj('product', productArray);  
  }
  else{
    productArray.push(productJSON);  
    localStorage.setObj('product', productArray);  
  }


});

Storage.prototype.setObj = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObj = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

Dopo aver aggiunto l'oggetto JSON all'array, il risultato è (in LocalStorage):

[{"id": "99", "nameEn": "Product Name1", "price": "767", "image": "1462012597217.jpeg"}, {"id": "93", "nameEn" : "Product Name2", "price": "76", "image": "1461449637106.jpeg"}, {"id": "94", "nameEn": "Product Name3", "price": "87" , "immagine": "1461449679506.jpeg"}]

dopo questa azione puoi inviare facilmente i dati al server come List in Java

L'esempio di codice completo è qui

Come immagazzino un carrello semplice usando localStorage?


0

Nel mio caso, il mio oggetto JSON non aveva alcun Array esistente, quindi ho dovuto creare prima l'elemento array e poi ho dovuto eseguire il push dell'elemento.

  elementToPush = [1, 2, 3]
  if (!obj.arr) this.$set(obj, "arr", [])
  obj.arr.push(elementToPush)  

(Questa risposta potrebbe non essere pertinente a questa particolare domanda, ma potrebbe aiutare qualcun altro)


0

Supponiamo di avere già dati in variabile alreadyData;

var alreadyData=[{"id":"99","nameEn":"Product Name1","price":"767","image":"1462012597217.jpeg"},{"id":"93","nameEn":"Product Name2","price":"76","image":"1461449637106.jpeg"},{"id":"94","nameEn":"Product Name3","price":"87","image":"1461449679506.jpeg"}];

var fields = []; //new array
var json = JSON.parse(alreadyData); //just parse in one variable
var json = JSON.parse(tableColumns);
for (var i = 0; i < json.length; i++) {
    fields.push(json[i]);//push data in fields
} 
fields.push({ 'id':33, 'nameEn': 'Singh', 'price': '222','image': '1462012597217.jpeg' }); // its new data
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.