JQuery, JSON, поиск и т. д.

Question

У меня есть масса значений в файле JSON , содержащем названия мест и их контактную информацию вместе с описанием. Я хотел бы создать таблицу со списком содержимого файла JSON на моей странице. Я надеюсь создать функцию поиска в реальном времени, которая удаляет каждую запись, которая больше не относится к каждому обнаруженному 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",
    }
]

Предложенный 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>

У меня есть смутное представление о том, как извлечь JSON из файла venues.json в jQuery, но я действительно не знаю, что с ним делать, если у меня будет .append (), содержащий всю информацию , Я просто ищу немного помощи с синтаксисом здесь!

О, и если у вас появятся какие-нибудь блестящие идеи о том, как обновить таблицу при поиске пользователем, это было бы очень признательно!

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 для визуализации шаблона и его вставкизаполнитель / контейнерный контейнер с именем 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);
}