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

Comment ajouter un nouvel attribut (élément) à un objet JSON en utilisant JavaScript?

JSON signifie JavaScript Object Notation. Un objet JSON est vraiment une chaîne qui n'a pas encore été transformée en l'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.

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

Un objet JSON est simplement un objet javascript, donc avec Javascript étant un langage basé sur un prototype, tout ce que vous avez à faire est de l'adresser en utilisant la notation par points.

mything.NewField = 'foo';

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 certains mots spéciaux dans IE peuvent vous donner une erreur.

Un exemple:

object.class = 'value';

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

Avec ECMAScript depuis 2015, vous pouvez utiliser Spread Syntax (… trois points):

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

Il vous permet d'ajouter des sous-objets:

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

le résultat serait:

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

Vous pouvez également fusionner des objets:

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

Vous pouvez également utiliser à Object.assignpartir 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 attribués. Au lieu de cela, ils seront ajoutés. Cependant, si vous affectez une valeur à un attribut existant, elle sera remplacée.

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

Se traduira par un seul objet json

Vous pouvez également ajouter de nouveaux objets json dans votre json, en utilisant la fonction d' extension ,

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

Une très bonne option pour la fonction d'extension est la fusion récursive. Ajoutez simplement la vraie valeur comme 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}}

Vous pouvez également ajouter dynamiquement des attributs avec des variables directement dans un littéral d'objet.

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

Résulte en:

{
    amount: 1, 
    amount__more: 2
}

Les usages $.extend() de jquery , comme ceci:

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

J'espère que vous les servez.