How to create if statement inside embedded HTML in JavaScript to show CSS class

Question

How to display one of two classes based on if there is data in the js array.

eg if there is responseData.title show class grey else class white

I am trying this now:

let resultHTML = '<article class="item">\
                    <div class="post-main">\
                        <header class="clear">\
                            <a href="' + responseData.url + '"</a>\
                            <span class="post-date">just now</span>\
                        </header>\
                        'if (responseData.title) {
                            '<section class="grey">'
                        } else {
                            '<section class="white">'
                        }'\
                            ' + articleImage + '\
                            <h3>' + responseData.title + '</h3>\
                            <div class="post-about">' + responseData.about + '</div>\
                        </section>\
                    </div>\
                </article>';

Answer 1

You can use the ternary operator . In your case, it would be like this:

let resultHTML = '<article class="item">\
                    <div class="post-main">\
                        <header class="clear">\
                            <a href="' + responseData.url + '"</a>\
                            <span class="post-date">just now</span>\
                        </header>\
                        ' + responseData.title ?
                            '<section class="grey">'
                        :
                            '<section class="white">'
                        + '\
                            ' + articleImage + '\
                            <h3>' + responseData.title + '</h3>\
                            <div class="post-about">' + responseData.about + '</div>\
                        </section>\
                    </div>\
                </article>';

Answer 2

I will prefer using Template literals (Template strings) with Conditional (ternary) operator which is more cleaner.

Demo:

 let responseData = {title:'abc'} let articleImage = 'test'; let resultHTML = `<article class="item"> <div class="post-main"> <header class="clear"> <a href=responseData.url </a> <span class="post-date">just now</span> </header> ${ responseData.title ? '<section class="grey">' : '<section class="white">' } ${articleImage} <h3> ${responseData.title} </h3> <div class="post-about"> ${responseData.about} </div> </section> </div> </article>`; console.log(resultHTML);