Añadir un nuevo elemento de matriz a un objeto JSON

Tengo un objeto en formato JSON que leo de un archivo JSON que tengo en una variable llamada teamJSON, que tiene este aspecto:

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

Quiero añadir un nuevo elemento a la matriz, como

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

para terminar con

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

antes de escribir en el archivo. ¿Cuál es una buena manera de añadir al nuevo elemento? Me he acercado pero todas las comillas dobles estaban escapadas. He buscado una buena respuesta en SO pero ninguna cubre bien este caso. Se agradece cualquier ayuda.

Solución

JSON es sólo una notación; para hacer el cambio quieres parse para poder aplicar los cambios a un JavaScript Object nativo, y luego stringify de vuelta a 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"}]}"
Comentarios (7)
var Str_txt = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

Si quieres añadir en la última posición entonces usa esto:

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 quieres añadir en la primera posición entonces usa el siguiente código:

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 quieres añadir en una posición determinada de un array prueba esto:

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

El bloque de código anterior añade un elemento después del segundo elemento.

Comentarios (0)

Por ejemplo, aquí hay un elemento como el botón para añadir un artículo a la cesta y los atributos apropiados para guardar en 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);
}

Después de añadir el objeto JSON al Array el resultado es (en LocalStorage):

[{"id":"99","nameEn":"Product Name1","price":"767","image":"1462012597217.jpeg"},{"id":"93","nameEn":"Product Name2","price":"76","image":"1461449637106.jpeg"},{"id":"94","nameEn":"Nombre del producto3","price":"87","image":"1461449679506.jpeg"}].

después de esta acción puede enviar fácilmente los datos al servidor como List en Java

El ejemplo de código completo está aquí

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

Comentarios (0)