Databases
StackOverflow2013
Postsdbo
POBuilding nested filters via JSON (javascript)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBuilding nested filters via JSON (javascript)
    text
    copied!<p>I have a bunch of filtering options that use Jquery to update the DOM on a simple page that displays a list of rendered "stuff" generated by a JSON object. Each of the filters works really well independently (<a href="http://jsfiddle.net/DPFff/" rel="nofollow">see fiddle</a>) however, I want them to be more connected. I.E. Lets say I filter by gender, then I want to search for a name. Or, If I filter by min age, then filter by activity status. My Filtering functions look like this </p> <pre><code>function sortByAge(value) { document.getElementById("range").innerHTML= value; var data = getData(); var length = data.result.length; var htmlSlug = ""; for (var i=0; i&lt; length; i++) { if (data.result[i].age &gt;= value){ htmlSlug += writeHTML(data,i); } } if (!htmlSlug) htmlSlug = "Nothing Found"; $('.data-container').html(htmlSlug); } function writeHTML(data, i) { //this gets called any time we need to build html to the DOM var active = ""; if (data.result[i].isActive == true) { var active = "active"; } var slug = '&lt;div class="member-card-container '+active+'"&gt;'+ '&lt;div class="info"&gt;'+ '&lt;span class="name"&gt;'+data.result[i].name+'&lt;/span&gt; '+ '&lt;span class="gender"&gt;'+data.result[i].gender+ '&lt;/span&gt; '+ '&lt;span class="age"&gt;'+data.result[i].age+'&lt;/span&gt;'+ '&lt;span class="latitude"&gt;'+data.result[i].latitude+'&lt;/span&gt;'+ '&lt;span class="longitude"&gt;'+data.result[i].longitude+'&lt;/span&gt;'+ '&lt;/div&gt;'+ '&lt;div class="address"&gt;'+data.result[i].address+'&lt;/div&gt;'+ '&lt;/div&gt;'; return slug; } </code></pre> <p>again, see <a href="http://jsfiddle.net/DPFff/" rel="nofollow">fiddle</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload