I have a JSON file that I'd like to get values from and display. I tried to use a ternary operator but I couldn't seem to get the output I wanted since I have multiple variables. Here's what I tried:

//If there's a word, display its character / reading. Otherwise, just display the reading
return `${json.data[0].word} ? ${json.data[0].word (${json.data[0].reading}) : ${json.data[0].reading}`

This just outputs the actual string but with undefined if json.data[0].word is undefined. I'd like to only display the reading in this case.

I have a JSON file that I'd like to get values from and display. I tried to use a ternary operator but I couldn't seem to get the output I wanted since I have multiple variables. Here's what I tried:

//If there's a word, display its character / reading. Otherwise, just display the reading
return `${json.data[0].word} ? ${json.data[0].word (${json.data[0].reading}) : ${json.data[0].reading}`

This just outputs the actual string but with undefined if json.data[0].word is undefined. I'd like to only display the reading in this case.

• javascript
• string

• 1 Could you add an example of the json data? – Shidersz Commented Jan 26, 2019 at 2:51
• 2 Template literals are Strings. This looks like a pointless use of them. Just use the Object code. json.data[0].word ? json.data[0].word(json.data[0].reading) : json.data[0].reading;. – StackSlave Commented Jan 26, 2019 at 3:00

2 Answers 2

Placeholders don't work recursively in String templates. Write a clearer code.

If you insist in using a pact ternary code:

json.data[0].word
  ? `${json.data[0].word} (${json.data[0].reading})`
  : `${json.data[0].reading}`

Your external placeholder is unnecessary.

There is a much easier way to go about this. First I would create a variable that contained the resulting evaluation, and simply returned a literal of that result.

Then I would split up the nested ternaries into a set of nested if statements that are much easier to understand and modify in the future. Take a look at the code block below, you should be able to structure your code very easily and cleanly. Nested ternaries I believe to be very bad practice, and should be avoided at all times.

let $result;

if (true) {

   if (true) {
      $result = 'output 2';
   } else {
      $result = 'output 3';
}
   $result = 'output 1';
}

return `${result}`;