JQuery, json, search, etc.

Question

I have a ton of values ​​in a JSON file that contains the names of places and their contact information along with a description. I would like to create a table containing the contents of the JSON file on my page. I hope to create a real-time search function that deletes every record that no longer applies to every detected one keyUp.

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",
    }
]

Suggested 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</td>
            <td>Rock</td>
        </tr>
    </tbody>
</table>

I have a vague idea on how to grab JSON from venues.json file in jQuery, but I really would not know what to do with it as soon as I have it .append () a containing all the information I'm just looking for syntax help is here!

Oh, and if you have any bright ideas on how to update the table as the user searches, it would be very helpful!

Love,

Benjibee

Answer 1

jQuery.tmpl JSON, :

<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>

jQuery, div-/ Container:

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

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

quickSearch . ( , ) :

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

Answer 2

, . jQuery 1.4 .

: 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>​

, :

: 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);
}