I am getting issue while displaying my table data inside tbody, in my javascript i am getting result object and i am using template literals inside javascript file Here's my code:

for (i = 0; i < size; i++) 
{
    serialNo++;
    html += `<tr>
    <td>${serialNo}</td>
    <td>${result[i].first_name}</td>
    <td>${result[i].last_name}</td>
    <td>${result[i].email}</td>
    <td>${result[i].mobile}</td>
    (${(result[i].status == 1)} ? '<td><div class="switchery-demo">
    <input type="checkbox" checked id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" 
    data-plugin="switchery" data-size="small" data-color="#1bb99a"/> 
    </div></td>' : '<td><div class="switchery-demo"><input 
    type="checkbox" checked data-plugin="switchery" 
    id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" data- 
    size="small" data-color="#1bb99a"/></div></td>')
    </tr>`;
}

In result[i].status i am using ternary operator i am checking if status == 1 then display first one else second but it is creating two instead of one i don't know where i am going wrong kindly help.

I am getting issue while displaying my table data inside tbody, in my javascript i am getting result object and i am using template literals inside javascript file Here's my code:

for (i = 0; i < size; i++) 
{
    serialNo++;
    html += `<tr>
    <td>${serialNo}</td>
    <td>${result[i].first_name}</td>
    <td>${result[i].last_name}</td>
    <td>${result[i].email}</td>
    <td>${result[i].mobile}</td>
    (${(result[i].status == 1)} ? '<td><div class="switchery-demo">
    <input type="checkbox" checked id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" 
    data-plugin="switchery" data-size="small" data-color="#1bb99a"/> 
    </div></td>' : '<td><div class="switchery-demo"><input 
    type="checkbox" checked data-plugin="switchery" 
    id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" data- 
    size="small" data-color="#1bb99a"/></div></td>')
    </tr>`;
}

In result[i].status i am using ternary operator i am checking if status == 1 then display first one else second but it is creating two instead of one i don't know where i am going wrong kindly help.

• javascript
• template-literals
• template-strings

• 1 Your ternary-operator is inside the string. The validation never happens! – Beru Commented Jul 25, 2019 at 7:55
• can you tell me the solution please? i tried it in many ways – Ikram Khizer Commented Jul 25, 2019 at 7:57

4 Answers 4

You need to move the whole part into the expression part

`${ result[i].status == 1
    ? '...'
    : 'some other'
}`

Example with nested template strings.

console.log(`${true === false
    ? `${ 10 }`
    : `${ 20 }`
}`);

Right now, the template expression (the ${ ... } ends before the ? (and resumes the plain string), so it will just print the plain ? and ::

${(result[i].status == 1)} ? '<td>...

You need to nest the inner template literals instead:

for (i = 0; i < size; i++) {
  serialNo++;
  html += `<tr>
    <td>${serialNo}</td>
    <td>${result[i].first_name}</td>
    <td>${result[i].last_name}</td>
    <td>${result[i].email}</td>
    <td>${result[i].mobile}</td>
    (${
      result[i].status == 1
      ? `<td><div class="switchery-demo">
        <input type="checkbox" checked id="demo${result[i].contact_id}" 
        onclick="status_item(this,'${result[i].contact_id}')" 
        data-plugin="switchery" data-size="small" data-color="#1bb99a"/> 
        </div></td>`
      : `<td><div class="switchery-demo"><input 
        type="checkbox" checked data-plugin="switchery" 
        id="demo${result[i].contact_id}" 
        onclick="status_item(this,'${result[i].contact_id}')" data- 
        size="small" data-color="#1bb99a"/></div></td>`
     })
   </tr>`;
}

Because the inner part (the <td><div class="switchery-demo">...) uses template literal expressions as well, make sure to use template literal delimiters (the backtick) rather than a '.

In addition to Nina Scholz's answer I'd reend you to do it as follows:

html += '<tr>....'

html += result[i].status == 1
    ? '...'
    : 'some other'

Reason being:

1. It's easier to read your code that way instead of having it all inside of a string.
2. You can format your code better (#1 - better to read your code)

Also: It's better to use === than ==. Make sure that you can use === because == can be more error-prone.

for (i = 0; i < size; i++) 
{
    serialNo++;
    html += `<tr>
    <td>${serialNo}</td>
    <td>${result[i].first_name}</td>
    <td>${result[i].last_name}</td>
    <td>${result[i].email}</td>
    <td>${result[i].mobile}</td>';

    if(result[i].status == 1){
    html+= '<td><div class="switchery-demo">
    <input type="checkbox" checked id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" 
    data-plugin="switchery" data-size="small" data-color="#1bb99a"/> 
    </div></td>' : '<td><div class="switchery-demo"><input 
    type="checkbox" checked data-plugin="switchery" 
    id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" data- 
    size="small" data-color="#1bb99a"/></div></td>')
    </tr>`;
 }
}