JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<select id="type">
    <option value="id">ID</option>
    <option value="street">Street</option>
    <option value="town">Town</option>
    <option value="occupants">Occupants</option>
</select>
<select id="type2">
    <option value="is">is</option>
    <option value="in">in</option>
    <option value="like">like</option>
    <option value="like">range</option>
</select>
<input id="val" type ="text" />
<button onClick="filter.applyFilter()">Filter</button>

<div id="results"></div>

JavaScript

var Filter = function () {

   this.init(); 
    
}

Filter.prototype = {
    buildings: [],
    init: function () {
        var self = this;
        // No data vall so ill manualy make buildings
        self.buildings[0] = {"id":1,"street":"35 Church Road","street":"Cambridge","occupants":2};
        self.buildings[1] = {"id":2,"street":" 21 Church Street","town":"Cambridge","occupants":5};
        self.buildings[2] = {"id":3,"street":" 1 High Street","town":"Bedford","occupants":2};
    },
    applyFilter: function () {
        
        var self = this;
        
        var string = $("#type").val()+"__"+$("#type2").val()+"__"+$("#val").val();
        var builds = self.buildings.filter(self.stringToFunction(string));
        
        $('#results').html('');
        
        for (var obj in builds) {
             $('#results').append("<strong>"+builds[obj]["street"]+", "+builds[obj]["town"]+"</strong> has "+builds[obj]["occupants"]+" occupants<br />");
        }
       
    },
    stringToFunction: function (str) {
        
        var name = str;
        str = str.split('__');
        
        var Function = name+' = function (element) {';
        
        if (str[1] == 'is') { 
            Function += ' return element["'+str[0]+'"] == '+str[2]+';';
        } else if (str[1] == 'in') { 
            var array = str[2].split('_');
            Function += ' return inArray(element["'+str[0]+'"], ['+array.join(',')+']);';
        } else if (str[1] == 'like') { 
            Function += 'var str = ""+element["'+str[0]+'"]; ';
            Function += 'str = str.toLowerCase(); ';
            Function += 'console.log(str); ';
            Function += 'return str.indexOf("'+str[2].toLowerCase()+'") > -1;';
        } else if (str[1] == 'range') { 
            var array = str[2].split('_');
            Function += ' return (element["'+str[0]+'"] > '+array[0]+' && element["'+str[0]+'"] < '+array[1]+');';
        }
        
        Function += ' }';
        
        return...