web-dev-qa-db-fra.com

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

J'ai lu un objet au format JSON à 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 veux 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. Qu'est-ce qu'un bon moyen d'ajouter au nouvel élément? Je me suis rapproché mais toutes les guillemets doubles ont été échappés. J'ai cherché une bonne réponse sur SO mais aucun ne couvre vraiment ce cas. Toute aide est appréciée.

javascriptjson
87
Charles Wyke-Smith

JSON est juste une notation; effectuer les modifications souhaitées parse it afin de pouvoir appliquer les modifications à un objet JavaScript natif, puis stringify back à 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"}]}"
176
Paul S.
var Str_txt = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

Si vous voulez ajoutez à la dernière position alors utilisez le code

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

Et, si vous voulez ajoutez à la première position alors utilisez le 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"}]}"

Et, Tout le monde veut ajouter à une certaine position d’un tableau puis essayer ci-dessous le code

fruits['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"}]}"

Au-dessus du bloc de code, ajoutez un élément après le deuxième élément.

16
Ajay Gupta

Nous devons d'abord analyser l'objet JSON, puis 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 the obj retour à json

1
Abhijit

Par exemple, voici un élément comme bouton pour ajouter un article au panier et des attributs appropriés pour enregistrer 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": "Nom du produit1", "prix": "767", "image": "1462012597217.jpeg"}, {"id": "93", "nameEn" : "Nom du produit2", "prix": "76", "image": "1461449637106.jpeg"}, {"id": "94", "nomEn": "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.

Exemple de code complet est ici

Comment stocker un panier simple en utilisant localStorage?

0
Musa