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

J'ai un objet au format JSON que je lis depuis 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 obtenir

{"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 m'en suis approché mais tous les guillemets doubles étaient échappés. J'ai cherché une bonne réponse sur SO mais aucune ne couvre ce cas. Toute aide est la bienvenue.

Programmation
javascript json
19 septembre 2013 в 1:17
50 vues
Solution

JSON n'est qu'une notation ; pour effectuer le changement, vous devez [parse][1] le faire de manière à pouvoir appliquer les changements à un objet JavaScript natif, puis [stringify][2] le ramener à 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"}]}"

[1] : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse [2] : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

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

Si vous voulez 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 voulez ajouter à la 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"}]}"

Si vous voulez additionner à une certaine position d'un tableau, essayez 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.

João Tiago
Réponse modifiée 24 octobre 2019 в 10:22
Commentaires (0)

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

Après avoir ajouté l'objet JSON à Array, le résultat est (dans LocalStorage) :

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

Après cette action, vous pouvez facilement envoyer des données au serveur en tant que List en Java.

L'exemple de code complet est ici

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

Community
Réponse modifiée 23 mai 2017 в 12:34
Commentaires (0)