I have a simple ajax request returning some data and then inserting into a template literal. I was wondering if it it possible to insert an 'if' statement inside the template?

Essentially to add a further line of code, if the json object has a 5th color.

  $.ajax({

url: 'http://localhost:8888/ColourCatchr%202/app/search.php'

}).done(function(results){

var res = jQuery.parseJSON(results);

console.log(res);

$.each(res,function(index,result){

  $('.palettes').append(`

    <div class=panel panel-default>

      <div class=panel-heading>

        <h3 class=panel-title>${result.name}</h3>

      </div>

      <div class=panel-body>

        <div class=col-md-12 colors>

          <div class=color style=background-color:#${result['color 1']}><h6>${result['color 1']}</h6></div>

          <div class=color style=background-color:#${result['color 2']}><h6>${result['color 2']}</h6></div>

          <div class=color style=background-color:#${result['color 3']}><h6>${result['color 3']}</h6></div>

          <div class=color style=background-color:#${result['color 4']}><h6>${result['color 4']}</h6></div>



          ${if(result['color 5']){

            <div class=color style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>

            }

          }



          <div class=color style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>

          <p>on hover change to translucent background and black text for ecah color</p>

        </div>

      </div>

      <div class=panel-footer>

          <a class=btn btn-info btn-lg href=update.html?id=${result.id}>Edit</a>

          <a class=btn btn-danger btn-lg>Delete</a>

      </div>

    </div>`

    )

})



})