How to insert conditional statements in html inside a JavaScript function?

Question

This is my code:

var tr = `<tr>
    <td>${flippableTemplate(item['Group 1'])}</td>
    <td>${flippableTemplate(item['Group 2'])}</td>
    <td>${item['Description']}</td>             
    <td>${item['Description2']}</td>
</tr>`;

I want to insert conditional statements in it like

if (item['A'] != item['B'])
  $('<td></td>').text("Great!").appendTo(tr);
else
  $('<td></td>').text("Oops").appendTo(tr);

How do I go about doing that?

Any kind of help would be greatly appreciated. Thanks.

Either populate htmls from javascript or use any framework for custom html logic — binariedMe
– binariedMe, Commented Sep 22, 2017 at 3:30
Yes. In javascript (not html), you can write something like create element like this one and append it : w3schools.com/jsref/met_document_createelement.asp, w3schools.com/jsref/met_node_appendchild.asp — binariedMe
– binariedMe, Commented Sep 22, 2017 at 3:35

Shiladitya · Accepted Answer · 2017-09-22 04:21:43Z

2

Here you go with a solution https://jsfiddle.net/vh1bmfuz/

var item = { Category: 1, Description: 'Description 1.1', 'Description 2': 'Description 1.2', status: 'Status 1', 'Group 1': 'group1.1', 'Group 2': 'group1.2', 'A': 1, 'B': 2}

var matchMethod = function(){
  return ((item['A'] != item['B']) ? 'Great' : 'Ops');
}


var tr = `<tr>
    <td>${item['Group 1']}</td>
    <td>${item['Group 2']}</td>
    <td>${item['Description']}</td>             
    <td>${item['Description 2']}</td>
    <td>${matchMethod()}</td>
</tr>`;

$('table').append(tr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>

I've a method that will check & return a string based on condition matched.

Hope this will help you.

answered Sep 22, 2017 at 4:21

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Steve Doson Over a year ago

Thanks! Also if I had to add an image or a unicode, in this condition, any idea how I can change the size? Because it is getting printed fine, but the size is an issue.

Shiladitya Over a year ago

@SteveDoson Can you please help me to understand the problem more deeper by creating a jsfiddle?

Steve Doson Over a year ago

I will show you the line I wrote. It's working fine. Just that the size is a problem.

<td>${matchMethod(item['Completed'] === true) ? 'unicode' : (item['Completed'] === false && item['Prediction'] === null) ? '--' : 'unicode' }</td>

Steve Doson Over a year ago

when I am running the snippet, it is saying item has not been defined.

Andy · Accepted Answer · 2017-09-22 04:05:24Z

0

Why not create a function that takes your inputs, tests them, and then outputs the template?

function appendCell(a, b) {
  const word = a !== b ? 'Great' : 'Oops';
  return `<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>${word}</td></tr>`;
}

const a = 1;
const b = 2;
const output = appendCell(a, b);

OUTPUT

<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>Great</td></tr>

Adjust the code for your requirements.

DEMO

answered Sep 22, 2017 at 4:05

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

How to insert conditional statements in html inside a JavaScript function?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related