Agregue un nuevo atributo (elemento) al objeto JSON usando JavaScript


439

¿Cómo agrego un nuevo atributo (elemento) al objeto JSON usando JavaScript?

Respuestas:


628

JSON significa JavaScript Object Notation. Un objeto JSON es realmente una cadena que aún no se ha convertido en el objeto que representa.

Para agregar una propiedad a un objeto existente en JS, puede hacer lo siguiente.

object["property"] = value;

o

object.property = value;

Si proporciona información adicional, como exactamente lo que necesita hacer en contexto, puede obtener una respuesta más personalizada.


66
@shanehoban aquí aes JSON, a.stal como lo definió usted es una cadena. Ahora está intentando agregar ["subproperty"]a una cadena. ¿Entiendes ahora por qué recibiste el error?
shivam

1
Para los principiantes, recuerden que, como dice Quintin, un "objeto" JSON no es un objeto en absoluto, es solo una cadena. Debería convertirlo en un objeto Javascript real con JSON.parse () antes de usar su ejemplo deobject["property"] = value;
SpaceNinja

2
@shanehoban revisa mi respuesta en la parte superior y verás cómo puedes agregar múltiples atributos a la vez.
Victor Augusto el

1
@EduardoLucio Eso es porque deberías estar usando JSON.stringify.
Solomon Ucko

1
@EduardoLucio El problema es que console.logno está destinado a la serialización. Uso console.log(JSON. stringify(object)).
Solomon Ucko

182
var jsonObj = {
    members: 
           {
            host: "hostName",
            viewers: 
            {
                user1: "value1",
                user2: "value2",
                user3: "value3"
            }
        }
}

var i;

for(i=4; i<=8; i++){
    var newUser = "user" + i;
    var newValue = "value" + i;
    jsonObj.members.viewers[newUser] = newValue ;

}

console.log(jsonObj);

66
Justo lo que estaba buscando, agregando un elemento cuando el nombre debe construirse mediante programación
Quilkin 02 de

44
gran ejemplo. Esto me ayuda.
Ricky

152

Un objeto JSON es simplemente un objeto javascript, por lo que con Javascript como un lenguaje basado en prototipos, todo lo que tiene que hacer es abordarlo utilizando la notación de puntos.

mything.NewField = 'foo';

Eso es todo, ¡me encanta el prototipo de JavaScript!
caglaror

70

gracias por este post Quiero agregar algo que pueda ser útil.

Para IE, es bueno usar

object["property"] = value;

sintaxis porque algunas palabras especiales en IE pueden darte un error.

Un ejemplo:

object.class = 'value';

esto falla en IE, porque " clase " es una palabra especial. Pasé varias horas con esto.


@Sunil Garg ¿Cómo almacenarías ese valor como hijo para algún padre en el objeto original?
Jamie Corkhill

42

Con ECMAScript desde 2015 puede usar Sintaxis de propagación (... tres puntos):

let  people = { id: 4 ,firstName: 'John'};
people = { ...people, secondName: 'Fogerty'};

Le permite agregar subobjetos:

people = { ...people, city: { state: 'California' }};

el resultado sería:

{  
   "id": 4,
   "firstName": "John",
   "secondName": "Forget",
   "city": {  
      "state": "California"
   }
}

También puede fusionar objetos:

var mergedObj = { ...obj1, ...obj2 };

13

También puedes usar Object.assigndesde ECMAScript 2015. También le permite agregar atributos anidados a la vez. P.ej:

const myObject = {};

Object.assign(myObject, {
    firstNewAttribute: {
        nestedAttribute: 'woohoo!'
    }
});

Ps: Esto no anulará el objeto existente con los atributos asignados. En cambio, se agregarán. Sin embargo, si asigna un valor a un atributo existente, se anulará.


7
extend: function(){
    if(arguments.length === 0){ return; }
    var x = arguments.length === 1 ? this : arguments[0];
    var y;

    for(var i = 1, len = arguments.length; i < len; i++) {
        y = arguments[i];
        for(var key in y){
            if(!(y[key] instanceof Function)){
                x[key] = y[key];
            }
        }           
    };

    return x;
}

Extiende múltiples objetos json (ignora funciones):

extend({obj: 'hej'}, {obj2: 'helo'}, {obj3: {objinside: 'yes'}});

Resultará en un solo objeto json


2

También puede agregar nuevos objetos json a su json, utilizando la función extender ,

var newJson = $.extend({}, {my:"json"}, {other:"json"});
// result -> {my: "json", other: "json"}

Una muy buena opción para la función extender es la fusión recursiva. Simplemente agregue el valor verdadero como primer parámetro (lea la documentación para más opciones). Ejemplo,

var newJson = $.extend(true, {}, {
    my:"json",
    nestedJson: {a1:1, a2:2}
}, {
    other:"json",
    nestedJson: {b1:1, b2:2}
});
// result -> {my: "json", other: "json", nestedJson: {a1:1, a2:2, b1:1, b2:2}}

2

También puede agregar dinámicamente atributos con variables directamente en un objeto literal.

const amountAttribute = 'amount';
const foo = {
                [amountAttribute]: 1
            };
foo[amountAttribute + "__more"] = 2;

Resultados en:

{
    amount: 1, 
    amount__more: 2
}

0

Usos $.extend()de jquery , así:

token = {_token:window.Laravel.csrfToken};
data = {v1:'asdass',v2:'sdfsdf'}
dat = $.extend(token,data); 

Espero que les sirvas.

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.