jQuery, JSON, searching, etc.

Question

I've got a mass of values in a JSON file containing the names of venues and their contact information along with a description. I'd like to generate a table listing the contents of the JSON file on my page. I'm hoping to create a live search function that removes each entry that is no longer relevant with eachkeyUpdetected.

The JSON

[
    {
        "name": "Aquarium Café Bar",
        "site": "http://www.aquariumcafebar.ca",
        "address": "2923 Masson 728-6116",
        "genre": "default"
    },‎
    {
        "name": "Aréna Pierre “Pete” Morin",
        "site": "none",
        "address": "1925 St-Antoine 634-3471",
        "genre": "default",
    }
]

The Proposed HTML

<table>
    <thead>
        <tr>
            <th>Venue</th>
            <th>Address</th>
            <th>Website</th>
            <th>Genre</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Aquarium Caf&eacute; Bar</td>
            <td>2923 Masson 728-6116</td>
            <td>http://www.aquariumcafebar.ca&lt;/td&gt;
            <td>Rock</td>
        </tr>
    </tbody>
</table>

I've got a vague idea of how to grab the JSON from the venues.json file in jQuery, but I would really not know what to do with it once I have it to .append() a containing all the info. I'm just looking for a bit of help with the syntax here!

Oh, and if you happen to have any bright ideas about how to update the table as the user searches, it'd be greatly appreciated!

Love,

BenjiBee

Answer 1

You could use jQuery.tmpl to create a table from the JSON data, using a template like this:

<script type="text/html" id="VenueTemplate">
  <table id="VenueResults">
    <thead>
      <tr>
        <th>Venue</th>
        <th>Address</th>
        <th>Website</th>
        <th>Genre</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${name}</td>
        <td>${address}</td>
        <td>${site}</td>
        <td>${genre}</td>
      </tr>
    </tbody>
  </table>
</script>

And this jQuery to render the template and inject it into a placeholder/container div named Container:

var yourJSONData;  // Assuming you've loaded this from wherever.

$('#VenueTemplate').tmpl(yourJSONData)
                   .appendTo('#Container');

Then use the quickSearch plugin to interactively filter that data. It can be applied to the table (after rendering, of course) like this:

$('#SearchInputField').quicksearch('#VenueResults tbody tr');

Answer 2

It is a pretty simple task if you don't want to use a plugin. This assumes jQuery 1.4 or later.

Try it out: http://jsfiddle.net/ZBKSg/

jQuery

var $tbody = $('table > tbody');

   // Assumes the data is assigned to a variable "data"
for(var i = 0, len = data.length; i < len; i++) {
    var $tr = $('<tr />');
    $('<td/>',{text:data[i].name}).appendTo($tr);
    $('<td/>',{text:data[i].site}).appendTo($tr);
    $('<td/>',{text:data[i].address}).appendTo($tr);
    $('<td/>',{text:data[i].genre}).appendTo($tr);
    $tr.appendTo($tbody);
}

HTML

<table>
    <thead>
        <tr>
            <th>Venue</th>
            <th>Address</th>
            <th>Website</th>
            <th>Genre</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>​

You could probably speed it up a little like this:

Try it out: http://jsfiddle.net/ZBKSg/1/

var $tbody = $('table > tbody');
var row = '<tr><td></td><td></td><td></td><td></td></tr>'

for(var i = 0, len = data.length; i < len; i++) {
    var $tr = $(row);
    $tr.children(':first').text(data[i].name)
                .next().text(data[i].site)
                .next().text(data[i].address)
                .next().text(data[i].genre);
    $tr.appendTo($tbody);
}