Conditionally set an object property

Question

Is there some syntax for setting properties based on a condition?

data: {
    userId: 7,
    actionId: 36,
    express: (myCondition ? true : null) // does not work
}

I want express to be either set to a value or not set at all (i.e., there should be no key named express), and without extra statements after the definition. I know I can use it as a boolean, but the receiving side is using an isset() check and I'm wondering if I can avoid modifying it.

Edit: Seems there is no direct solution to the problem as stated. Here are the close suggestions:

JSON.stringify (Chris Kessel, dystroy):

var json = JSON.stringify( {
    data: {
        userId: 7,
        actionId: 36,
        express: (myCondition ? true : null)
    }
});

An anonymous function (Paulpro):

var data = new function(){
    this.userId = 7;
    this.actionId = 36;
    myCondition && (this.express = true);
};

An extra statement (x4rf41):

data: {
    userId: 7,
    actionId: 36
}
if(myCondition) data["express"] = true;

Eval (a former colleague of mine):

eval("data = {userId: 7, actionId: 36 " + (myCondition ? ", express: true}" : "}"))

Conditional definition (don't really know how to label this one):

data = (
    (myCondition && { userId: 7, actionId: 36, express: true }) ||
    (!myCondition && { userId: 7, actionId: 36 })
);

when you say "not set at all", do you mean the property exists but has the value `undefined`, or the property does not exist? — jbabey, Aug 02 '13 at 14:49
@mcmlxxxvi I think you meant object properties, not JSON properties. There is no JSON in your question. — Paul, Aug 02 '13 at 15:25
A lot of interesting answers, so determining whose to select was tough. Thanks for the input, all of you. — mcmlxxxvi, Aug 02 '13 at 15:33
loved different alternate options listed within the question — M. Atif Riaz, May 29 '19 at 06:09
Duplicate of [In Javascript, how to conditionally add a member to an object?](https://stackoverflow.com/questions/11704267/in-javascript-how-to-conditionally-add-a-member-to-an-object) — ford04, Nov 20 '20 at 09:53

score 114 · Answer 1 · edited Oct 19 '22 at 10:36

114

Use the spread operator.

data: {
    userId: 7,
    actionId: 36,
    ...myCondition && {express: true}
}

Note that if you're using Flow, that syntax might generate type check errors. You can write the above more explicitly, and less succinctly, as:-

data: {
    userId: 7,
    actionId: 36,
    ...(myCondition ? {express: true} : {})
}

edited Oct 19 '22 at 10:36

MD. RAKIB HASAN

3,670
4
22
35

answered Oct 20 '17 at 21:36

ericsoco

24,913
29
97
127

5

This is a great answer. – R. AbuBaker Nov 13 '20 at 00:10
if don't want empty object: ...(myCondition ? {express: true} : null) then filter null by: data = data.filter(function(x) { return x !== null }); – user1345817 Apr 17 '22 at 15:53
@user1345817 Just to chime in, the update you added is not needed because the spread in the answer (`...`) eliminates the empty object (`{}`) in the falsy case of the ternary. Thus, the property is only added in the truthy case. – adstwlearn Apr 29 '23 at 04:46

Denys Séguret · Accepted Answer · 2013-08-02T15:14:09.673

78

Do it like this :

data: {
    userId: 7,
    actionId: 36,
    express: (myCondition ? true : undefined)
}

A property whose value is undefined isn't written when you stringify the object to JSON.

EDIT : It appears from the comments that there is no JSON involved in fact. OP is using $.ajax so $.param is probably used. $.param, unfortunately, does create an entry for properties whose value is undefined. So there's probably no solution without any supplementary line of code.

edited Aug 02 '13 at 15:14

answered Aug 02 '13 at 14:52

Denys Séguret

372,613
87
782
758

I'm just supplying it to an AJAX call and it's not stripped away - I'm not explicitly stringifying it ATM. – mcmlxxxvi Aug 02 '13 at 14:53
I don't know your API but it's almost sure it's calling JSON.stringify. Even if it doesn't, the norm doesn't allow to pass undefined value, so any API **must** remove properties whose value is `undefined`. – Denys Séguret Aug 02 '13 at 14:54
I'm using jQuery, and I don't know what it does with the object, but the property remains there. – mcmlxxxvi Aug 02 '13 at 14:55
jquery ajax wont stringify, i guess you just have to write an extra line. thats gotta be horrible – x4rf41 Aug 02 '13 at 14:56
It's not a problem. I'm just wondering if it is possible without the extra step. – mcmlxxxvi Aug 02 '13 at 14:57
6

+1 for JSON.stringify ignoring undefined properties. learned something new, thanks – jbabey Aug 02 '13 at 14:57
@mcmlxxxvi Is JSON involved somewhere as you wrote or are you (implicitely) calling $.param ? – Denys Séguret Aug 02 '13 at 15:03
@dystroy: Not sure - I think I'm (jQuery is) implicitly calling `$.param` . I just thought the question depends on JSON syntax enough to label it as such. – mcmlxxxvi Aug 02 '13 at 15:11
3

If you don't produce JSON, there there's no relation with JSON. – Denys Séguret Aug 02 '13 at 15:12
This won't work and will have a property with undefined. – sean Apr 27 '16 at 04:30
@sean yes, a property does exist, but I was running the object through `JSON.stringify` after construction. – mcmlxxxvi May 16 '16 at 08:47

Paul · Answer 3 · 2013-08-02T15:22:01.770

9

You can do it if you define your object using an anonymous function instead of object literal notation:

var data = new function(){
    this.userId = 7;
    this.actionId = 36;
    myCondition && (this.express = true);
};

The resulting data object is the exact same, except it's constructor will be the anonymous function instead of window.Object.

edited Aug 02 '13 at 15:22

answered Aug 02 '13 at 15:16

Paul

139,544
27
275
264

score 5 · Answer 4 · answered Aug 02 '13 at 14:48

5

first of all, thats javascript, not JSON.

the solution:

data: {
    userId: 7,
    actionId: 36
}
if(myCondition) data["express"] = true;

answered Aug 02 '13 at 14:48

x4rf41

5,184
2
22
33

This isn't really an answer : *"without extra statemets after the definition"*. Obviously OP knew he could do that. – Denys Séguret Aug 02 '13 at 14:49
1

This won't work in ES6. showing me prettier and linting errors – jay rangras May 18 '21 at 11:35

score 3 · Answer 5 · answered Aug 02 '13 at 14:51

3

You could do something like this:

var json = JSON.stringify( {
    data: {
        userId: 7,
        actionId: 36,
        express: (myCondition ? true : null)
    }
});

answered Aug 02 '13 at 14:51

Chris Kessel

5,583
4
36
55

7

`null` is not stripped, `undefined` is. – mcmlxxxvi Aug 02 '13 at 15:45
Yep, very true. I was just echoing in my code what was in the original. – Chris Kessel Aug 02 '13 at 16:02

score 3 · Answer 6 · answered Oct 13 '21 at 05:29

The spread operator now fixes this. Here is an example with two comparisons.

Note: I changed date: to const date = so that it is valid runnable javascript. This can also be used with data: if it is supposed to be inside of a deep object structure.

const compareValue = 13;
const data =  {
    userId: 7,
    actionId: 36,
    ...(compareValue > 10 && {propertyForGreaterThan10: 'foo'}),
    ...(compareValue < 10 && {propertyForLessThan10: 'bar'}),
}
console.log(data);

score 2 · Answer 7 · answered Aug 23 '17 at 09:08

A bit old but there is a good solution as well you can do :

data: {
    userId: 7,
    actionId: 36
}

Object.assign(data, !myCondition && { express: yourValue });

Thus it will assign your express property with the value you need if your condition is false.

Conditionally set an object property

7 Answers7

Linked

Related