Agregar un nuevo elemento de matriz a un objeto JSON


120

Tengo un objeto de formato JSON que leí de un archivo JSON que tengo en una variable llamada teamJSON, que se ve así:

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

Quiero agregar un nuevo elemento a la matriz, como

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

terminar con

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

antes de volver a escribir en el archivo. ¿Cuál es una buena forma de agregar al nuevo elemento? Me acerqué pero todas las comillas dobles se escaparon. He buscado una buena respuesta sobre SO, pero ninguna cubre este caso. Se agradece cualquier ayuda.


6
yourObj.theTeam.push({"teamId":"4","status":"pending"});
PSL

2
"JSON" no es un objeto, es una notación.
Brad Christie

1
Cuando lee el objeto JSON del archivo, ¿se interpreta como JSON o una cadena? Si es una cadena, primero debe analizar la cadena como JSON, entonces puede hacer lo que sugieren el otro comentario y respuesta.
Marcos

3
@Charles lee tu título y luego vuelve a examinar tu comentario.
Brad Christie

1
@ CharlesWyke-Smith ¿Qué tipo es su teamJSONvariable? ¿Es una cadena JSON, es decir, '{"theTeam":[...]}'un objeto literal real? Sugerencia: useconsole.log(typeof teamJSON)
Phil

Respuestas:


233

JSON es solo una notación ; para realizar el cambio que desea parsepara que pueda aplicar los cambios a un objeto JavaScript nativo , luego stringifyvolver 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"}]}"

16
+1 para señalar que esto debe analizarse en un objeto primero para ser manipulado.
Brad Christie

3
Dijo que ya tiene el objeto en una variable nombrada teamJSON. En ningún momento se menciona una cadena
Phil

6
@Phil: Si es JSON, es una cadena. Si no es así, no es JSON.
user2736012

1
Las comillas escapadas en realidad me hacen preguntarme si el JSON se codificó dos veces.
user2736012

24
Paul, esa es una respuesta muy constructiva. Aborda la deficiencia en el enunciado del problema sin menospreciar el póster original. Delinea más claramente los límites entre operar en los objetos javascript y la representación de texto JSON de esos objetos. Creo que es esencial comprender que una vez que se ha analizado el JSON, estamos operando en objetos javascript puros; el hecho de que originalmente provengan de JSON es irrelevante. De todos modos, leer tu respuesta fue un soplo de aire fresco después de todos los comentarios despectivos que hicieron que el OP se sintiera como un idiota.
Larry Hector

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

Si desea agregar en la última posición , use 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 desea agregar en la primera posición , use 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"}]}"

Cualquiera que quiera agregar en una determinada posición de una matriz, pruebe 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 agrega un elemento después del segundo elemento.


1

Primero necesitamos analizar el objeto JSON y luego podemos agregar un elemento.

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

Finalmente JSON.stringificamos el obj de nuevo a JSON


¿Qué pasa si nuestro JSON no tiene un nombre como theTeam, sino que solo contiene nodos con los elementos teamId y status? entonces el mío se vería así: var str = '[{"teamId": "1", "status": "pendiente"}, {"teamId": "2", "status": "member"}, {"teamId ":" 3 "," estado ":" miembro "}] ';
Shafique

0

Por ejemplo, aquí hay un elemento como un botón para agregar 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"><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);
}

Después de agregar 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": "Product Name3", "price": "87" , "imagen": "1461449679506.jpeg"}]

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

El ejemplo de código completo está aquí

¿Cómo guardo un carrito simple usando localStorage?


0

En mi caso, mi objeto JSON no tenía ningún Array existente, así que primero tuve que crear un elemento de arreglo y luego tuve que empujar el elemento.

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

(Es posible que esta respuesta no sea relevante para esta pregunta en particular, pero puede ayudar a otra persona)


0

Supongamos que ya tenemos datos 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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.