JSONオブジェクトに新しい配列要素を追加する

teamJSONという変数に入れているJSONファイルから読み込んだJSON形式のオブジェクトがありますが、これは次のようなものです。

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

というように、新しいアイテムを配列に追加したいと思います。

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

のように追加して、最終的に

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

を追加してから、ファイルに書き戻します。新しい要素に追加する良い方法はありますか？近づいたのですが、二重引用符がすべてエスケープされてしまいました。SOで良い回答を探しましたが、このケースをカバーするものはありませんでした。よろしくお願いします。

プログラミング
javascript json
19日 9月 2013 в 1:17
46 ビュー
ソリューション

JSON_は単なる表記法です。変更を加えるには、その変更をネイティブの_JavaScript Object_に適用できるように解析し、その後、文字列化して_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"}]}"
解説 (7)
 
var Str_txt = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

最後の位置に追加したい場合は、このようにします。

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

最初の位置に追加したい場合は、以下のコードを使用してください。

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

配列の特定の位置に**追加したい人はこれを試してみてください。

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

上記のコードブロックは、2番目の要素の後に要素を追加します。

João Tiago
編集した答え 24日 10月 2019 в 10:22
解説 (0)

例えば、ここではアイテムをバスケットに追加するためのボタンのような要素と、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);
}

JSONオブジェクトをArrayに追加すると、結果は(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","image":"1461449679506.jpeg"}] となります。

これで、JavaでListとしてサーバーにデータを送ることができます。

全コード例はこちら

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

Community
編集した答え 23日 5月 2017 в 12:34
解説 (0)