1

I'm rendering the following HTML with JSX

<div data-things="{"somethingOne": 1, "somethingTwo": 22, "somethingThree": 'some string'}">
</div>

In JSX I have

const data = `{
  "somethingOne": ${valueOne}, 
  "somethingTwo": ${valueTwo}, 
  "somethingThree": ${valueThree}
}`;

and returning

<div data-things={ data }><div>

This works fine but now I am trying to add conditions in the template literal to show property-value pairs only if a value exists.

I tried many variations including:

const data = `{
  "somethingOne": ${valueOne}, 
  ${valueTwo} && "somethingTwo": ${valueTwo},
  "somethingThree": ${valueThree}
}`;

The condition renders:

22 && "initialSlide": 22,

It shows the value but returns the conditional statement syntax instead of processing it.

How can I make the condition work? I have to add the condition for each one.

CyberJ
  • 1,018
  • 1
  • 11
  • 24
  • Hm .. It looks like you're trying to pass JSON stringified string to `data-things`. Am I right? If so - you can try to just stringify an object literal, instead of doing string interpolation. [You can check my detailed answer](https://stackoverflow.com/a/53121363/4312466). – Jordan Enev Nov 02 '18 at 16:21

2 Answers2

1

I think this should work. Please give a try

     const two = valueTwo ? `"somethingTwo": ${valueTwo},`:"";
     const data = `{
         "somethingOne": ${valueOne}, 
         ${two}
         "somethingThree": ${valueThree}
      }`;
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
  • Thanks! I tried but it is returning only the values `22: 22,` instead `"somethingTwo": 22,` – CyberJ Nov 02 '18 at 15:00
1

According to your question:

You can do it using a ternary operator in the the placeholder (${}) as follows:

const data = `{
  "somethingOne": ${valueOne}, 
  ${ valueTwo ? `"somethingTwo:" ${valueTwo},`: '' }
  "somethingThree": ${valueThree}
}`;

Pseudo code example:

const data = `{
  ${ true ? '"key": "value",' : '' }
  "key1": "value1",
  ${ false ? '"key2": "value2",' : '' }
}`


console.log(data)

... But what problem you're trying to solve?

I guess here we have the XY Problem.

Maybe I could be wrong - but you're trying to create a stringified object?

If so, you can simply do it as conditionally creating an object literal and later just stringify it:

const data = {
  ...true ? { key: 'value' } : {},
  key1: 'value',
  ...false ? { key2: 'value2' } : {}
}

console.log(JSON.stringify(data))
Jordan Enev
  • 16,904
  • 3
  • 42
  • 67
  • Brilliant answer! Thank you very much for considering the actual problem. It seems like stringifying is the best solution. To hide a properly:value if no value exists I could just use.. `...value ? { key: value } : {}` ? – CyberJ Nov 02 '18 at 17:06
  • That's right. With this syntax - you will hide the value, if the ternary is false. If the answer helps you - you can accept / vote it. Thanks. :) – Jordan Enev Nov 02 '18 at 17:09
  • You have accepted the answer, which is different from voting. However - thank you :) – Jordan Enev Nov 02 '18 at 17:17
  • Accepted is what i meant :) – CyberJ Nov 02 '18 at 17:45