Adicionar novo atributo (elemento) ao objeto JSON usando JavaScript

439

Como adiciono novo atributo (elemento) ao objeto JSON usando JavaScript?

azulado
fonte

Respostas:

628

JSON significa JavaScript Object Notation. Um objeto JSON é realmente uma sequência que ainda precisa ser transformada no objeto que representa.

Para adicionar uma propriedade a um objeto existente em JS, você pode fazer o seguinte.

object["property"] = value;

ou

object.property = value;

Se você fornecer algumas informações extras, exatamente como o que você precisa fazer no contexto, poderá obter uma resposta mais personalizada.

Quintin Robinson
fonte
6
@shanehoban aqui aé JSON, a.sconforme definido por você é uma string. Agora você está tentando adicionar ["subproperty"]a uma string. Você entende agora por que recebeu o erro?
shivam
1
Para iniciantes, lembre-se de que, como diz Quintin, um "objeto" JSON não é um objeto, é apenas uma string. Você precisaria convertê-lo em um objeto Javascript real com JSON.parse () antes de usar seu exemplo deobject["property"] = value;
SpaceNinja
2
@shanehoban, verifique minha resposta na parte superior e você verá como pode adicionar vários atributos ao mesmo tempo.
Victor Augusto
1
@EduardoLucio Isso é porque você deveria estar usando JSON.stringify.
Solomon Ucko
1
@EduardoLucio O problema é que console.lognão se destina à serialização. Use 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);
Cody
fonte
6
Apenas o que eu estava procurando, adicionando um elemento quando o nome deve ser construído programaticamente
quilkin
4
ótimo exemplo. Isso me ajuda.
Ricky
152

Um objeto JSON é simplesmente um objeto javascript, portanto, com o Javascript sendo uma linguagem baseada em protótipo, tudo o que você precisa fazer é resolvê-lo usando a notação de ponto.

mything.NewField = 'foo';
FlySwat
fonte
É isso aí, eu amo o protoype javascript!
Caglaror 14/05
70

obrigado por este post. Quero adicionar algo que pode ser útil.

Para o IE, é bom usar

object["property"] = value;

sintaxe, porque algumas palavras especiais no IE podem gerar um erro.

Um exemplo:

object.class = 'value';

isso falha no IE, porque " classe " é uma palavra especial. Passei várias horas com isso.

leo
fonte
@ Sunil Garg Como você armazenaria esse valor como filho para algum pai no objeto original?
Jamie Corkhill 9/04/19
42

Com o ECMAScript desde 2015, você pode usar a Spread Syntax (… três pontos):

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

É permitido adicionar subobjetos:

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

o resultado seria:

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

Você também pode mesclar objetos:

var mergedObj = { ...obj1, ...obj2 };
Cassio Seffrin
fonte
13

Você também pode usar a Object.assignpartir de ECMAScript 2015. Também permite adicionar atributos aninhados de uma só vez. Por exemplo:

const myObject = {};

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

Ps: Isso não substituirá o objeto existente pelos atributos atribuídos. Em vez disso, eles serão adicionados. No entanto, se você atribuir um valor a um atributo existente, ele será substituído.

Victor Augusto
fonte
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;
}

Estende vários objetos json (ignora funções):

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

Resultará em um único objeto json

Ivan
fonte
2

Você também pode adicionar novos objetos json ao seu json, usando a função de extensão ,

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

Uma opção muito boa para a função de extensão é a mesclagem recursiva. Basta adicionar o valor verdadeiro como o primeiro parâmetro (leia a documentação para mais opções). Exemplo,

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}}
George Siggouroglou
fonte
2

Você também pode adicionar dinamicamente atributos com variáveis ​​diretamente em um literal de objeto.

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

Resulta em:

{
    amount: 1, 
    amount__more: 2
}
Stefan Rein
fonte
0

Usos $.extend()de jquery , assim:

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

Espero que você os sirva.

Giovanny Gonzalez
fonte