578

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

0

11 Answers 11

753

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.

9
  • 6
    @shanehoban here a is JSON, a.s as just defined by you is a string. Now you are trying to add ["subproperty"] to a string. Do you understand now why u got the error?
    – shivam
    Commented Jul 12, 2014 at 11:45
  • 3
    For beginners, remember that as Quintin says, a JSON "object" is not an object at all, it's just a string. You would need to convert it to an actual Javascript object with JSON.parse() before using his example of object["property"] = value;
    – SpaceNinja
    Commented Dec 28, 2015 at 20:02
  • 2
    @shanehoban check my answer on the top and you'll see how you can add multiple attributes at once. Commented Aug 24, 2017 at 12:57
  • 1
    @EduardoLucio That's because you should be using JSON.stringify. Commented May 29, 2020 at 0:16
  • 1
    @EduardoLucio The issue is that console.log is not intended for serialization. Use console.log(JSON. stringify(object)). Commented May 29, 2020 at 2:48
221
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);
2
  • 8
    Just what I was looking for, adding an element when the name must be constructed programmatically
    – quilkin
    Commented Feb 2, 2015 at 20:33
  • when jsonObj in itself would contain more than one element, then: ---> jsonObj["members"].anyname = "value"; <--- adds an element at the first level. This is particulary interesting in a situation like: ---> for (var key in jsonObj ) { jsonObj[key].newAttrib= 'something '; }
    – Martin
    Commented Jul 29, 2023 at 13:14
170

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';
1
  • That is it, i love javascript protoype!
    – caglaror
    Commented May 14, 2015 at 8:09
136

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

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.

1
  • @Sunil Garg How would you store that value as a child to some parent in the original object?
    – user6233283
    Commented Apr 9, 2018 at 0:10
17

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.

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

Extends multiple json objects (ignores functions):

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

Will result in a single json object

0
6

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
}
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}}
1
  • 2
    extend() is part of jQuery Commented Jan 16, 2021 at 12:37
0

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.

0

Following worked for me for add a new field named 'id'. Angular Slickgrid usually needs such id

  addId() {
     this.apiData.forEach((item, index) => {
     item.id = index+1;
  });