Accepting additional user inputs based on input from ajax response

Question

I am taking 2 inputs from a user:

1. area
2. time

Based on these, I am displaying the available restaurants in that area at that time . I also want to display all the cuisines that those restaurants serve, as checkboxes. Then, the user can select from those check boxes and the restaurants can be filtered according to the cuisine as well.

The problem I am facing is that after I display all the cuisines that those restaurants serve, I am not able to find a way to change the results based on those cuisines.

Can this be solved by creating 2 xmlhttpreq objects? Please give me suggestions.

Answer 1

Just make sure that your original object has the relevant information about each restaurant's cuisine, then you can just filter which options you display to the user based on whether or not they include a particular option in the filter. Since hiding/showing an option doesn't need any server involvement, there is no need for another AJAX request.

This jsfiddle demo shows one way of simply filtering the restaurant list (using a little jQuery). The DOM manipulation is fairly basic though, and the change event can be readily emulated in native JS if you don't want to use jQuery.

var time = "8:00pm";
var parameters = {
    area: 1,
    time: time
};

// Initially only r1, r2, r5 shown
var restaurants = {
    r1: { name:"One", cuisine: "Thai", area: "1", time: time },
    r2: { name:"Two", cuisine: "Chinese", area: "1", time: time},
    r3: { name:"Three", cuisine: "American", area: "2", time: time },
    r4: { name:"Four", cuisine: "Mediterranean", area: "1", time: "9:00pm"},
    r5: { name:"Five", cuisine: "American", area: "1", time: time }
};

$(document).ready(function() {
    parameters.cuisine = $('input[name="cuisine"]:checked').map(function() {
        return $(this).val();
    }).toArray();

    writeRestaurants();

    $('input[name="cuisine"]').change( function(){
        var $this = $(this);
        var a = parameters.cuisine;
        if( $this.is(':checked') ) {
            a.push($this.val());           
        }
        else {
            var k = a.indexOf($this.val());
            a.splice(k, 1);
        }   
        writeRestaurants();
    });
});

function writeRestaurants() {
    $('#restaurants').empty();
    for (var i in restaurants ) {
        var include = true;
        for (var param in parameters) {
            if( param == 'cuisine' ){
                if (parameters[param].indexOf(restaurants[i][param]) < 0) {
                    include = false;
                }
            }
            else if (restaurants[i][param] != parameters[param]) {
                include = false;
            }
        }
        if (include) {
            $('#restaurants').append('<p>'+restaurants[i].name+'</p>');
        }
    }
}​