web-dev-qa-db-fra.com

Ajouter un nouvel attribut (élément) à un objet JSON à l'aide de JavaScript

Comment ajouter un nouvel attribut (élément) à un objet JSON à l'aide de JavaScript?

javascriptjson
397
Sri

JSON signifie JavaScript Object Notation. Un objet JSON est en réalité une chaîne qui n'a pas encore été transformée en objet qu'il représente.

Pour ajouter une propriété à un objet existant dans JS, vous pouvez procéder comme suit.

object["property"] = value;

ou

object.property = value;

Si vous fournissez des informations supplémentaires comme exactement ce que vous devez faire dans le contexte, vous obtiendrez peut-être une réponse plus personnalisée.

579
Quintin Robinson
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);
168
Cody

Un objet JSON est simplement un objet javascript. Le langage Javascript étant donc basé sur un prototype, il vous suffit de l’adresser en utilisant la notation par points.

mything.NewField = 'foo';
144
FlySwat

merci pour ce post. Je veux ajouter quelque chose qui peut être utile.

Pour IE, il est bon d'utiliser

object["property"] = value;

syntaxe car des mots spéciaux dans IE peuvent vous donner une erreur.

Un exemple:

object.class = 'value';

cela échoue dans IE, car "class" est un mot spécial. J'ai passé plusieurs heures avec ça.

61
leo

Avec ECMAScript 2015, vous pouvez utiliser la syntaxe Spread (… trois points):

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

Cela vous permet d'ajouter des sous-objets:

people = {...people, city:{estate: 'Alabama'}};

le résultat serait:

{  
   "id":4,
   "firstName":"John",
   "secondName":"Forget",
   "city":{  
      "estate":"Alabama"
   }
}

Vous pouvez également fusionner des objets:

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

Vous pouvez également utiliser Object.assign à partir de ECMAScript 2015. Il vous permet également d'ajouter des attributs imbriqués à la fois. Par exemple.:

const myObject = {};

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

Ps: Cela ne remplacera pas l'objet existant avec les attributs assignés. Au lieu de cela, ils seront ajoutés. Toutefois, si vous attribuez une valeur à un attribut existant, elle sera remplacée.

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

Étend plusieurs objets JSON (ignore les fonctions):

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

Résultera en un seul objet json

7
Ivan

Vous pouvez également ajouter de nouveaux objets JSON dans votre JSON, en utilisant la fonction extend ,

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

La fusion récursive est une très bonne option pour la fonction d'extension. Ajoutez simplement la valeur vraie en tant que premier paramètre (lisez la documentation pour plus d'options). Exemple,

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
George Siggouroglou

Utilise $.extend() of jquery, comme ceci:

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

J'espère que tu les sers.

0
Giovanny Gonzalez