Restructuring data received from JSON call
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 &lt;script&gt; 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.

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


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);
  $("&lt;div /&gt;").html(renderedData).appendTo(chatInfo);
});