jquery - filtering HTML table with JavaScript - no plugins -

update:

i still unable render data. basic strategy, has worked sorting write function filter named filtercats , call callback in getfilterbreed. approach seems nothing. approach below:

               function getfilterbreed(){                            $.getjson('cats.json', function(cats) {                         var cats = cats;                         filtercats(cats, criteria);                     });                 }                  function filtercats(cats, criteria){                     //renderdata(cats.filter(function(c){return c.breed === criteria;}));                     var criteria = document.getelementbyid('filter').value;                     var filtereddata = cats.filter(function(c){return c.breed === criteria;});                     renderdata(filtereddata);                 } 

and html:

                    <label for="filter">filter</label>                     <input type="text" name="filter" value="" id="filter" onchange="filterbreed()" /> 

i have tried approach makes data in table disappear:

function filtercats(){                 $.getjson('cats.json', function(result) {                     var cats = result;  // redundant, kept readability                     var criteria = document.getelementbyid('filter').value;                     var filtereddata = cats.filter(function(c){return c.breed === criteria;});                     renderdata(filtereddata);                 });             }        <label for="filter">filter</label>        <input type="text" name="filter" value="" id="filter" onchange="filtercats()" /> 

my json file named cat.json looks bigger:

[{                     "breed" : "abyssinian",                     "country" : "ethiopia",                     "coffeepreference" : "espresso",                     "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/gustav_chocolate.jpg/100px-gustav_chocolate.jpg"                 }, {                     "breed" : "aegean",                     "country" : "greece",                     "coffeepreference" : "medium roast, cream , sugar",                     "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/aegean_cat.jpg/100px-aegean_cat.jpg" }] 

lastly rendering data accordingly, works:

               function renderdata(cats){                         var output='<table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">';                         output+="<thead>"                         output+="<tr>";                         output+="<th> headshot </th>";                         output+="<th><button onclick='getsortedbreeddata()'>breed</button></th>";                         output+="<th><button onclick='getsortedcountrydata()'>country</button></th>";                         output+="<th><button onclick='getsortedcoffeedata()'>coffeepreference</button></th>";                         output+="</tr>";                         output+="</thead>"                      (var in cats) {                         output+="<tbody>"                           output+="<tr>";                         output+="<td><img src='" + cats[i].picture+"' alt='missing cat picture'></td>"                         output+="<td>" + cats[i].breed + "</td>"                         output+="<td>" + cats[i].country + "</td>"                         output+="<td>" + cats[i].coffeepreference + "</td>"                         output+="</tr>";                         output+="</tbody>"                       }                     output+="</table>";                     document.getelementbyid("cattable").innerhtml=output;                 }             

any appreciated.

alright, input calls filter function (note: no function arguments):

<input type="text" name="filter" value="" id="filter" onchange="filtercats()" /></br></br> 

next, filter function, yet takes 1 argument:

function filtercats(cats){     $.getjson('cats.json', function(cats) {         var cats = cats;         var criteria = document.getelementbyid("filter").value;         var filtereddata = cats.filter(function(cats){return cats.breed === "criteria";});         renderdata(cats);     }); } 

then, in getjson callback, have parameter same name outer function argument; same thing happens 1 more time in inner filter function.

another thing: return c.breed === "criteria"; comparing breed value string literal "criteria", not criteria value got filter input, unless cat breed "criteria" never evaluate true - should be: return c.breed === criteria; instead.

---

finally, after getting rid of many cats , fixing criteria, have like:

function filtercats(){     $.getjson('cats.json', function(result) {         var cats = result;  // redundant, kept readability         var criteria = $('#filter').val();         var filtereddata = cats.filter(function(c){return c.breed === criteria;});         renderdata(filtereddata);     }); } 

this code not tested, should work.

---

you can furtherly optimize code passing criteria value directly function:

<input type="text" name="filter" value="" id="filter" onchange="filtercats(this.value)" />  function filtercats(criteria){     $.getjson('cats.json', function(cats) {         renderdata(cats.filter(function(c){return c.breed === criteria;}));     }); } 

---

simple live example:

var improvizedcatsobject = [    {name: 'shomz',  breed: 'answerer'},     {name: 'robinette',breed: 'questioner'},     {name: 'not pure js',breed: 'jquery'},    {name: 'is library',breed: 'jquery'}  ];    function filtercats(criteria) {      renderdata(improvizedcatsobject.filter(function(c) {      return c.breed == criteria;    }));  }    function renderdata(res) {    var out = '';    (var = 0; < res.length; i++) {      out += '<p>' + res[i].name + '</p>';    }    $('#res').html(out);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="text" name="filter" value="" id="filter" onkeyup="filtercats(this.value)" />  <span>try inputting "answerer" or "questioner" (no quotes)</span>  <div id="res"></div>