How to add a new property to a JSON array?

Question

I'm trying to append new properties to some JSON objects not at alls. How can I do that?

For example, this is my JSON array:

var eventsArray;

    eventsArray = [

    {
        "title" : "Marco 1",
        "user": "Marco",
        "start" : "2016-01-12T16:00:00-05:00",
        "end" : "2016-01-12T17:00:00-05:00"
    }, {
        "title" : "Marco 2",
        "user": "Marco",
        "start" : "2016-01-12T10:00:00-05:00",
        "end" : "2016-01-12T12:00:00-05:00"
    }, {
        "title" : "Marta 1",
        "user": "Marta",
        "start" : "2016-01-12T09:00:00-05:00",
        "end" : "2016-01-12T10:00:00-05:00"
    }, {
        "title" : "Marta 2",
        "user": "Marta",
        "start" : "2016-01-13T09:00:00-05:00",
        "end" : "2016-01-13T10:00:00-05:00"
    }, {
        "title" : "Veronica 1",
        "user": "Veronica",
        "start" : "2016-01-12T13:00:00-05:00",
        "end" : "2016-01-12T14:00:00-05:00"
    }, {
        "title" : "Veronica 2",
        "user": "Marco",
        "start" : "2016-01-11T13:00:00-05:00",
        "end" : "2016-01-11T14:00:00-05:00"
    }

    ];

And then I need to add a new property, such as "color" : "red" to the user Veronica, i.e.:

var eventsArray;

eventsArray = [

{
    "title" : "Marco event 1",
    "user": "Marco",
    "start" : "2016-01-12T16:00:00-05:00",
    "end" : "2016-01-12T17:00:00-05:00"
}, {
    "title" : "Marco event 2",
    "user": "Marco",
    "start" : "2016-01-12T10:00:00-05:00",
    "end" : "2016-01-12T12:00:00-05:00"
}, {
    "title" : "Marta event 1",
    "user": "Marta",
    "start" : "2016-01-12T09:00:00-05:00",
    "end" : "2016-01-12T10:00:00-05:00"
}, {
    "title" : "Marta event 2",
    "user": "Marta",
    "start" : "2016-01-13T09:00:00-05:00",
    "end" : "2016-01-13T10:00:00-05:00"
}, {
    "title" : "Veronica event 1",
    "user": "Veronica",
    "start" : "2016-01-12T13:00:00-05:00",
    "end" : "2016-01-12T14:00:00-05:00",
    "color" : "red"
}, {
    "title" : "Veronica event 2",
    "user": "Veronica",
    "start" : "2016-01-11T13:00:00-05:00",
    "end" : "2016-01-11T14:00:00-05:00",
    "color" : "red"
}

];

Here above I just added (manually) the "color" : "red" only to the objects having "user" === "Veronica" (the latter two). How I can do this via JavaScript?

I tried some ways without success, such as:

eventsArray[4].color = "red";
eventsArray[5].color = "red";

or:

eventsArray.user["Veronica"].color = "red";
eventsArray.user["Veronica"].color = "red";

Is from a few days I'm learning to use JSON.

Please note that in this specific case there will be not any problems having objects with different properties: my program will not explode!

Simply, try this eventsArray.forEach(function (item) {if(item.title.indexOf('Veronica') > -1) item.color='red';}) — kriznaraj
– kriznaraj, Commented Mar 29, 2016 at 8:21
This is not JSON. It's a Javascript array with objects inside it. JSON is a closely related serialisation format. — deceze
– deceze ♦, Commented Mar 29, 2016 at 8:32
@smallatom: OP isn't wanting to check the title, but the user. — Michael Geary
– Michael Geary, Commented Mar 29, 2016 at 8:40

Michael Geary · Accepted Answer · 2016-03-29 08:45:03Z

3

There are a bunch of ways you could do this.

Here's one easy way:

eventsArray.forEach( function( event ) {
    if( event.user == 'Veronica' ) event.color = 'red';
});

Of course you will probably want to do this for other users and colors. So it would be best to generalize it into a function:

function setUserColor( events, user, color ) {
    events.forEach( function( event ) {
        if( event.user == user ) event.color = color;
    });
}

Then you can call it like this:

setUserColor( eventsArray, 'Veronica', 'red' );

And now you can do the same for other users too:

setUserColor( eventsArray, 'Marta', 'green' );

edited Mar 29, 2016 at 8:45

answered Mar 29, 2016 at 8:17

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaker · Accepted Answer · 2016-03-29 08:25:02Z

1

Here's a basic one.

 for(var i = 0; i < eventsArray.length; i++){
   if(eventsArray[i].user === "Veronica" {
      eventsArray[i].color = "red";
   }
 }

answered Mar 29, 2016 at 8:25

Shaker

337 bronze badges

Collectives™ on Stack Overflow

How to add a new property to a JSON array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related