Restructuring data received from JSON call

Question

I'm making a JSON call and receiving data and inputting the data received into some HTML. However I don't think this is the best way to return the data. It's seems like a bit of a hack as I'm injecting a bunch of HTML in my jQuery. I'm also adding an image inside of my jQuery cause I want it to appear between some of the JSON data that is getting returned. Ideally I'd like my html to loop through and generate this info into the chatInfo div. Anybody have any ideas how to better do this?

$.getJSON("/services/chatInfo.json?user=manual" + mediaTypes + locationTypes, function(data) {

         var items = [];
            $.each( data.media, function( key, val ) {
            items.push( "<div class='chatInfo'><h6 id='" + key + "'>" + val.displayName + "</h6>" );
            items.push( "<aside><img src='/google.png'></aside><p>" + val.hours + "</p></div>" );
            });

            $("<div>").html(items.join("")).appendTo( "#chatInfo" );
    });

Answer 1

A much more maintainable solution would be using templates, like Handlebars. This is to primarily avoid HTML in the JS, which can get messy in the long run:

Assuming your data looks like:

{
  media : [
    {"displayName" : "", "hours" : ""},
    ...
  ]
}

Add this to your page. This will be your template. It will not render since it's inside <script> but it also won't run since the type is not text/javascript. Creating it is straightforward. If you want to see how it looks on the DOM while making them, just erase the script tags and you'll see it and a bunch of "{{ }}" tags.

<script type="text/template" id="template-chatinfo">
  {{#media}}
    <div class="chatInfo>
      <h6 id="{{@index}}">{{displayName}}</h6>
      <aside>
        <img src="/google.png" />
        <p>{{hours}}</p>
      </aside>
    </div>
  {{/media}}
</script>

Then your JS, short and lean.

// Get the template and compile it to a renderer function;
var template = $('#template-chatinfo');
var templateRenderer = Handlebars.compile(template);

// You might want to cache chatInfo
var chatInfo = $('#chatInfo');

// Pull out the url for easy reading and editing
var url = "/services/chatInfo.json?user=manual" + mediaTypes + locationTypes;    

$.getJSON(url, function(data) {
  // Render the data and append
  var renderedData = templateRenderer(data);
  $("<div />").html(renderedData).appendTo(chatInfo);
});