Ajout d'un nouvel élément de tableau à un objet JSON

J'ai un objet au format JSON que j'ai lu à partir d'un fichier JSON que j'ai dans une variable appelée teamJSON, qui ressemble à ceci:

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

Je souhaite ajouter un nouvel élément au tableau, tel que

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

pour finir avec

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

avant de réécrire dans le fichier. Quelle est la bonne façon d'ajouter au nouvel élément? Je me suis rapproché mais tous les guillemets doubles ont été échappés. J'ai cherché une bonne réponse sur SO mais aucune ne couvre tout à fait ce cas. Toute aide est appréciée.

JSON n'est qu'une notation ; pour apporter la modification souhaitée parseafin de pouvoir appliquer les modifications à un objet JavaScript natif , puis stringifyrevenir à 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"}]}"

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

Si vous souhaitez ajouter à la dernière position, utilisez ceci:

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

Si vous souhaitez ajouter en première position, utilisez le code suivant:

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

Quiconque souhaite ajouter à une certaine position d'un tableau essaie ceci:

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

Le bloc de code ci-dessus ajoute un élément après le deuxième élément.

Nous devons d'abord analyser l'objet JSON, puis nous pouvons ajouter un élément.

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

Enfin, nous JSON.stringify l' obj retour à JSON

Par exemple, voici un élément comme un bouton pour ajouter un article au panier et des attributs appropriés pour l'enregistrement dans 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);
}

Après avoir ajouté un objet JSON au tableau, le résultat est (dans LocalStorage):

[{"id": "99", "nameEn": "Product Name1", "price": "767", "image": "1462012597217.jpeg"}, {"id": "93", "nameEn" : "Nom du produit2", "prix": "76", "image": "1461449637106.jpeg"}, {"id": "94", "nameEn": "Nom du produit3", "prix": "87" , "image": "1461449679506.jpeg"}]

après cette action, vous pouvez facilement envoyer des données au serveur sous forme de liste en Java

L'exemple de code complet est ici

Comment stocker un panier simple en utilisant localStorage?

Dans mon cas, mon objet JSON ne contenait aucun Array existant, je devais donc créer un élément de tableau d'abord, puis pousser l'élément.

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

(Cette réponse peut ne pas être pertinente pour cette question particulière, mais peut aider quelqu'un d'autre)

Supposons que nous ayons déjà des données en variable 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