how to get json value with checkbox by using ajax jquery method?

Question

hy, i am new with json, ajax and jquery. i am try to make a filter with checkbox which only shows me result on the behalf of checkbox value. for example if i click on sharjah its shows me all object which contains sharjah and same as for every city and if i click on any other city checkbox it shows values with it.

<div id="check" class="service_name">
    <label><input type="checkbox" name="services" value="sharjah"> Sharjah</label><br>
    <label><input type="checkbox" name="services" value="dubai">dubai</label><br>
    <label><input type="checkbox" name="services" value="abu dhabi">abu dhabi</label><br>
    <label><input type="checkbox" name="services" value="musaffa">musaffa</label>
</div>

here is my json file.

{
   "p1": { 
            "name": "Satish",
            "age":   25,
            "company": "Techntoip",
            "cities": [
                "sharjah",
                "dubai",
                "musaffa"
            ]
         },


   "p2": {
            "name": "Kiran",
            "age":   28,
            "company": "Oracle",
            "cities": [
                "sharjah",
                "dubai",
                "abu dhabi",
                "musaffa"
            ]
         },                           
   "p3": {
            "name": "Kiran",
            "age":   28,
            "company": "Oracle",
            "cities": [
                "sharjah",
                "abu dhabi",
                "musaffa"
            ]
         },                           
   "p4": {
            "name": "Kiran",
            "age":   28,
            "company": "Oracle",
            "cities": [
                "dubai",
                "abu dhabi",
                "musaffa"
            ]
         },                           
   "p5": {
            "name": "Kiran",
            "age":   28,
            "company": "Oracle",
            "cities": [
                "sharjah",
                "dubai",
                "abu dhabi"
            ]
         },                           
   "p6": {
            "name": "Kiran",
            "age":   28,
            "company": "Oracle",
            "cities": [
                "sharjah",
                "dubai",
                "musaffa"
            ]
         }                           
}

Answer 1

Take a look at the ajax method, jQuery.AJAX

 var inputValue = $(this).val()
    $.ajax({
      url: "url-to-your-json-file?param=" + inputValue,
    }).done(function(response) {
      console.log(response) //here you deal with the json response
    });