get json

by toubia95

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<input tabindex="1" id="recherche" type="search" placeholder="Entrez un nom !">
<table style="width:100%" id="entreprises">
</table>

CSS

/*
https://www.html5rocks.com/en/tutorials/cors/
https://developer.chrome.com/extensions/xhr
http://www.geologia.fr/index.php?id=452
*/

table,
th,
td {
  border: 1px solid black;
}

JavaScript

var mySearch = " ";
  $.getJSON("http://www.geologia.fr/index.php?id=452", {})
    .done(function(data) {
      var result = "<tr><th>Entreprise</th><th>Url</th> <th>Logo</th><th>Catégorie</th><th>Type</th><th>Stand</th></tr>";
      $.each(data.items, function(i, item) {
        if (item.entreprise.match(mySearch)) {
          result += "<tr><td>" + item.entreprise + "</td><td>" + item.url + "</td><td><img width='100px' src='http://www.geologia.fr/uploads/tx_gtgeologia/" + item.logo + "'></td><td>" + item.category + "</td><td>" + item.type + "</td><td>" + item.number + "</td></tr>";
        }
      });
      $('#entreprises').html(result);
    });
$('#recherche').bind('keyup keypress change input search', () => {
  mySearch = new RegExp($('#recherche').val(), "gi");
  $.getJSON("http://www.geologia.fr/index.php?id=452", {})
    .done(function(data) {
      var result = "<tr><th>Entreprise</th><th>Url</th> <th>Logo</th><th>Catégorie</th><th>Type</th><th>Stand</th></tr>";
      $.each(data.items, function(i, item) {
        if (item.entreprise.match(mySearch)) {
          result += "<tr><td>" + item.entreprise + "</td><td>" + item.url + "</td><td><img width='100px' src='http://www.geologia.fr/uploads/tx_gtgeologia/" + item.logo + "'></td><td>" + item.category + "</td><td>" + item.type + "</td><td>" + item.number + "</td></tr>";
        }
      });
      $('#entreprises').html(result);
    });
});