Optimizing JSON append template I am fetching a list of messages from some JSON and appending each message as an LI within a UL. I have created the message template within jQuery to append each message to the document. My code works well but I can't help but feel it could be improved (I am a beginner JS programmer). From what I have seen online moving the templating to handlebars.js would be a better solution but I can't be sure.

$(document).ready(function() {
  var broadcastMessagesJsonURL = "https://api.myjson.com/bins/sadap";
  $.getJSON(broadcastMessagesJsonURL, function(data) {
  $.each(data.broadcastMessages, function(i, item) {

  //All items from the json
  var broadcastMessageID = (item.ID);
  var checkBroadcastMessageRead = (item.read ? " broadcast__message__read__state--unread" : "");
  var broadcastMessageSubject = (item.subject);
  var broadcastMessageGroup = (item.group);
  var broadcastMessageDateSent = (item.dateSent);
  var checkBroadcastFeatureImage = (item.featureImage ? " broadcast__message__image--active" : "");
  var checkBroadcastForm = (item.form ? " broadcast__message__form--active" : "");
  var checkBroadcastAttachments = (item.attachments ? " broadcast__message__attachment--active" : "");
  var broadcastMessageContent = (item.content);

  var broadcastMessageTemplate = ('&lt;li class="broadcast__message__list__item" data-broadcast-message-ID="' + broadcastMessageID + '"&gt; \
                                    &lt;div class="broadcast__message__wrapper"&gt; \
                                      &lt;div class="broadcast__message__read__state' + checkBroadcastMessageRead + '"&gt;&lt;/div&gt; \
                                      &lt;div class="broadcast__message__subject"&gt;' + broadcastMessageSubject + '&lt;/div&gt; \
                                      &lt;div class="broadcast__message__group"&gt;' + broadcastMessageGroup + '&lt;/div&gt; \
                                      &lt;div class="broadcast__message__date__time__stamp" title="' + broadcastMessageDateSent + '"&gt;' + broadcastMessageDateSent + '&lt;/div&gt; \
                                      &lt;div class="broadcast__message__snippet"&gt;' + broadcastMessageContent + '&lt;/div&gt; \
                                    &lt;/div&gt; \
                                  &lt;/li&gt;');
  $(".broadcast__messages__list").append(broadcastMessageTemplate);
});
  }).fail(function() {
    console.log("broadcastMessages json cannot be loaded");
  });
});


CODEPEN LINK
Rewrite

Below is a rewrite with all my further suggestions applied.



const messagesURL = 'https://api.myjson.com/bins/sadap';

const messagesLoadError = () =&gt; console.error('broadcastMessages json cannot be loaded');

const forEachMessage = (_, message) =&gt; {
  const messageRead  = message.read         ? ' broadcast__message__read__state--unread' : '',
        featureImage = message.featureImage ? ' broadcast__message__image--active'       : '',
        form         = message.form         ? ' broadcast__message__form--active'        : '',
        attachments  = message.attachments  ? ' broadcast__message__attachment--active'  : '';

  const template = `&lt;li class="broadcast__message__list__message" data-broadcast-message-ID="${message.ID}"&gt;
    &lt;div class="broadcast__message__wrapper"&gt;
      &lt;div class="broadcast__message__read__state${messageRead}"&gt;&lt;/div&gt;
      &lt;div class="broadcast__message__subject"&gt;${message.subject}&lt;/div&gt;
      &lt;div class="broadcast__message__group"&gt;${message.group}&lt;/div&gt;
      &lt;div class="broadcast__message__date__time__stamp" title="${message.dateSent}"&gt;${message.dateSent}&lt;/div&gt;
      &lt;div class="broadcast__message__snippet"&gt;${message.content}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;`;

  $('.broadcast__messages__list').append(template);
};

$.getJSON(messagesURL, data =&gt; $.each(data.broadcastMessages, forEachMessage)).fail(messagesLoadError);
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
        integrity="sha384-fj9YEHKNa/e0CNquG4NcocjoyMATYo1k2Ff5wGB42C/9AwOlJjDoySPtNJalccfI"
        crossorigin="anonymous"&gt;
&lt;/script&gt;




Remarks

API security

Your API endpoint (https://api.myjson.com/bins/sadap) uses insecure and archaic SSL configuration. Actually, I couldn't connect to it at all, since I have tweaked up browser configuration. Few key points about your API's security:


Vulnerable to the OpenSSL CCS vulnerability (CVE-2014-0224),
Relies fully on insecure RC4 or legacy CBC mode of ciphers it uses,
Doesn't support Forward Secrecy.


See Qualys' test result.

Unused callback's parameter

You have the following line in your code:

$.each(data.broadcastMessages, function(i, item) {


but i is never used. In such cases, it's good to replace it with underscore (_).

Naming issues

As Leon Bambrick added on top of Phil Karlton's quote:


  There are only two hard things in Computer Science: cache
  invalidation, naming things, and off-by-one errors.


„Some” of your names are overly verbose (word broadcast seem to be everywhere) and other are not descriptive enough, like item.

Wall of text

This

var broadcastMessageID = (item.ID);
var checkBroadcastMessageRead = (item.read ? " broadcast__message__read__state--unread" : "");
var broadcastMessageSubject = (item.subject);
var broadcastMessageGroup = (item.group);
var broadcastMessageDateSent = (item.dateSent);
var checkBroadcastFeatureImage = (item.featureImage ? " broadcast__message__image--active" : "");
var checkBroadcastForm = (item.form ? " broadcast__message__form--active" : "");
var checkBroadcastAttachments = (item.attachments ? " broadcast__message__attachment--active" : "");
var broadcastMessageContent = (item.content);


would be much easier to read, if you would combine vars and align equality signs, question marks and colons:

var broadcastMessageID         = item.ID,
    broadcastMessageSubject    = item.subject,
    broadcastMessageGroup      = item.group,
    broadcastMessageDateSent   = item.dateSent,
    broadcastMessageContent    = item.content,
    checkBroadcastMessageRead  = item.read         ? ' broadcast__message__read__state--unread' : '',
    checkBroadcastFeatureImage = item.featureImage ? ' broadcast__message__image--active'       : '',
    checkBroadcastForm         = item.form         ? ' broadcast__message__form--active'        : '',
    checkBroadcastAttachments  = item.attachments  ? ' broadcast__message__attachment--active'  : '';


Variables

Most of your variables are unnecessary. If you would rename ambiguous item to message, you could use message.ID instead of doing var broadcastMessageID = (item.ID).

Also, bear in mind that the following three variables are unused: checkBroadcastFeatureImage, checkBroadcastForm, checkBroadcastAttachments.

Use template literals

var broadcastMessageTemplate could become much more easily readable if you used template literals to declare it. Mind however, that this is still not the „most vanilla” method to create DOM elements either. Take a look at createElement().

Fail notification

You should use console.error() instead of console.log() in your fail's callback.