Hinzufügen eines neuen Array-Elements zu einem JSON-Objekt

Ich habe ein Objekt im JSON-Format, das ich aus einer JSON-Datei lese, die ich in einer Variablen namens teamJSON habe, die wie folgt aussieht:

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

Ich möchte dem Array ein neues Element hinzufügen, z. B.

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

um am Ende Folgendes zu erhalten

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

vor dem Zurückschreiben in die Datei. Was ist ein guter Weg, um das neue Element hinzuzufügen? Ich war nah dran, aber alle doppelten Anführungszeichen waren escaped. Ich habe nach einer guten Antwort auf SO gesucht, aber keine deckt diesen Fall wirklich ab. Für jede Hilfe bin ich dankbar.

Lösung

JSON ist nur eine Notation; um eine Änderung vorzunehmen, müssen Sie es parse, damit Sie die Änderungen auf ein natives JavaScript-Objekt anwenden können, und dann stringify zurück zu 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"}]}"
Kommentare (7)
var Str_txt = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

Wenn Sie an letzter Stelle einfügen wollen, verwenden Sie dies:

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

Wenn Sie an der ersten Position einfügen möchten, verwenden Sie den folgenden Code:

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

Wer an einer bestimmten Position eines Arrays hinzufügen möchte, versucht dies:

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

Der obige Codeblock fügt ein Element nach dem zweiten Element ein.

Kommentare (0)

Zum Beispiel ist hier ein Element wie eine Schaltfläche zum Hinzufügen von Artikeln zum Warenkorb und entsprechende Attribute zum Speichern 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">Add to cart</a>'

var productArray=[];

$(document).on('click','[cartBtn]',function(e){
  e.preventDefault();
  $(this).html('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);
}

Nach dem Hinzufügen des JSON-Objekts zum Array ist das Ergebnis (in LocalStorage):

[{"id":"99","name":"Produktname1","Preis":"767","Bild":"1462012597217.jpeg"},{"id":"93","nameEn":"Produktname2","price":"76","image":"1461449637106.jpeg"},{"id":"94","nameEn":"Produktname3","Preis":"87","image":"1461449679506.jpeg"}]

nach dieser Aktion können Sie die Daten einfach als List in Java an den Server senden

Das vollständige Codebeispiel finden Sie hier

https://stackoverflow.com/questions/23554456/how-do-i-store-a-simple-cart-using-localstorage/37169851#37169851

Kommentare (0)