How can I put a ternary conditional in a JS object literal

Question

How can I put a ternary conditional in a JS object literal?

var options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

var overlayEXVOORh = {
  (options[0] == 1) ? "01" : EXVOORh01, : {};
  (options[5] == 6) ? "06" : EXVOORh06, : {};
  (options[7] == 8) ? "08" : EXVOORh08, : {};
  (options[3] == 4) ? "04" : EXVOORh04, : {};
};

console.log(overlayEXVOORh);

Below is the JS object that is working, but i'm aiming to make it "smarter"

var overlayEXVOORh = {
"06": EXVOORh06,
"07": EXVOORh07,
"08": EXVOORh08,
"01": EXVOORh01,
"02": EXVOORh02,
"03": EXVOORh03,
};

The Object has to be key/value pairs because I'm using a leaflet library.

What is the deriserd output? just create the object properties based on the content of the array? — Greedo, Apr 23 '21 at 07:04
Yes that is correct, if the content of the array is true, then the object gets created, otherwise its blank — GladH, Apr 23 '21 at 07:07
It does not make much sense to me to either return a key value pair or an object. You should have the keys fixed and based on the condition to return a value or an empty object — kboul, Apr 23 '21 at 07:13

score 2 · Answer 1 · answered Apr 23 '21 at 07:14

With ES6 you can make optional keys using spread operand like so:

var options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

var overlayEXVOORh = {
  ...(options[0] == 1 ? { "01" : EXVOORh01 } : {});
  ...(options[5] == 6 ? { "06" : EXVOORh06 } : {});
  ...(options[7] == 8 ? { "08" : EXVOORh08 } : {});
  ...(options[3] == 4 ? { "04" : EXVOORh04 } : {});
};

A short explanation would be this resolves to either { "01" : EXVOORh01 } or {}, then spreads that into the object.

Dane Brouwer · Accepted Answer · 2021-04-23T07:57:04.927

1

You've almost got the right answer, you've just confused the order

var options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

var overlayEXVOORh = {
  "01": (options[0] == 1) ? 'EXVOORh01' : {},
  "03": (options[7] == 9) ? 'EXVOORh03' : {},
  "06": (options[5] == 6) ? 'EXVOORh06' : {},
  "08": (options[7] == 8) ? 'EXVOORh08' :
    {},
  "04": (options[3] == 4) ? 'EXVOORh04' :
    {},
};

console.log(overlayEXVOORh);

Edit: Added failing condition "03"

edited Apr 23 '21 at 07:57

answered Apr 23 '21 at 07:13

Dane Brouwer

2,827
1
22
30

1

Thanks this seems to work! However whenthe conditional is not true "03 " : (options[7] == 9) ? EXVOORh03 : {}, the object doesnt work, but i will try some stuff with that, thanks so much! – GladH Apr 23 '21 at 07:49
You need to make sure `EXVOORh03` is a string, so `"EXVOORh03"` – Dane Brouwer Apr 23 '21 at 07:57

score 0 · Answer 3 · answered Apr 23 '21 at 07:14

You can do something like this:

var options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

var overlayEXVOORh = {
  "01" : (options[0] == 1) ?  "EXVOORh01" : {},
  "06" : (options[5] == 6) ?  "EXVOORh06" : {},
  "08" : (options[7] == 8) ?  "EXVOORh08" : {},
  "04" : (options[3] == 4) ?  "EXVOORh04" : {}
};

console.log(overlayEXVOORh);

iSckraa · Answer 4 · 2021-04-23T07:35:26.897

0

var options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

var overlayEXVOORh = {};

options.forEach(
    (element, index) => {
        if (options[element - 1] === index + 1) {
               overlayEXVOORh[options[element - 1]] = {};
        } else {
               overlayEXVOORh["EXVOORh" + element] = {};
        }
    });
  
console.log( overlayEXVOORh );

edited Apr 23 '21 at 07:35

answered Apr 23 '21 at 07:16

iSckraa

99
1
9

score 0 · Answer 5 · answered Apr 23 '21 at 07:18

I'm not sure what you want, but It maybe help you.

In javascript, object can accesss as object[key], and in this case, key is just a string.

so if string have some rule, like "prefixStringPostfix" you maybe use loop.

like below code

for(const value of array){
 if(condition) object[value] = something
}

How can I put a ternary conditional in a JS object literal

5 Answers5