Add new attribute (element) to JSON object using JavaScript

How do I add new attribute (element) to JSON object using JavaScript?

10 Answers

JSON stands for JavaScript Object Notation. A JSON object is really a string that has yet to be turned into the object it represents.

To add a property to an existing object in JS you could do the following.

object["property"] = value; 

or

object.property = value; 

If you provide some extra info like exactly what you need to do in context you might get a more tailored answer.

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

A JSON object is simply a javascript object, so with Javascript being a prototype based language, all you have to do is address it using the dot notation.

mything.NewField = 'foo'; 

With ECMAScript since 2015 you can use Spread Syntax ( …three dots):

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

It's allow you to add sub objects:

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

the result would be:

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

You also can merge objects:

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

thanks for this post. I want to add something that can be useful.

For IE, it is good to use

object["property"] = value; 

syntax because some special words in IE can give you an error.

An example:

object.class = 'value'; 

this fails in IE, because "class" is a special word. I spent several hours with this.

You can also use Object.assign from ECMAScript 2015. It also allows you to add nested attributes at once. E.g.:

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

Ps: This will not override the existing object with the assigned attributes. Instead they'll be added. However if you assign a value to an existing attribute then it would be overridden.

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

Extends multiple json objects (ignores functions):

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

Will result in a single json object

You can also dynamically add attributes with variables directly in an object literal.

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

Results in:

{ amount: 1, amount__more: 2 } 

You can also add new json objects into your json, using the extend function,

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

A very good option for the extend function is the recursive merge. Just add the true value as the first parameter (read the documentation for more options). Example,

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}} 

Uses $.extend() of jquery, like this:

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

I hope you serve them.