How add dynamically JSON data to the JQuery Mobile List view in PhoneGap application?

Question

I am getting JSON data list of collage within given distance in K.M. Now I have to add this collage list to the JQuery Mobile List View. In register page student information will fill. Then after pressing Register button javascript will execute and In Java script we are passing the distance as parameter, On server will fetch list of collage located within given distance. I intentionally did not mentioned longitude and latitude simplify reason. Letter We will pass two parameter current longitude and latitude instead of distance. Now fetched data which will in json formate I have to add this information to page CollageOptions under ul view. Please tell me what should I write inside success: function(response) in javascript. Structure of database is

<div data-role="page" id="register" data-theme="d" style="width: 100%;">           
    Name :<input type="text" placeholder="Name" name="userName">
    Email: <input type="text" placeholder="Email" name="eMail">
    Mobile: <input type="number" placeholder="Mobile" name="mobNumber">
    Distance: <input type="text" id="distance_id" name="distance" />
    <a href="#CollageOptions" class="ui-btn" style="background-color: #B6B6BC; color: black;"                         
       id="btnReg">Register</a>
</div>

<div data-role="page" id="CollageOptions">
<div style="width: 100%; margin-top:21%; margin-left: 1%; color: black; id="details" data-  
 role="listview">

   <ul id="listOfCollage" data-role="listview">
        Here I have to list list of collage available with in given distance
   </ul>
</div>

Now suppose distance is 35 k.m. then list of collage will fetch

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","1234");
mysql_select_db("foodybuddy");
if(isset($_GET['type']))
{
    if($_GET['type']=="login"){
        $distanceInKM=$_GET['Distance'];       
        $query="Select * from collage where Distance<='$distanceInKM'";
        $result=mysql_query($query);
        $totalRows=mysql_num_rows($result); 
        if($totalRows>0){
            $recipes=array();
            while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){
                $recipes[]=array('Chef'=>$recipe);
            }
            $output=json_encode(($recipes));
            echo $output;
        }
    }
}
else{
    echo "Invalid format";
}

<script> 
            $(document).ready(function(){  
               $("#btnReg").click(function(){  
                  var distance = document.getElementById('distance_id').value;                
                  $.ajax({ 
                              url:"http://192.168.1.4/Experiements/webservices/getBuddy.php", 
                              type:"GET", 
                              dataType:"json", 
                              data:{type:"login", Distance:distance}, 
                              ContentType:"application/json", 
                              success: function(response){



                              }, 
                              error: function(err){ 
                                  alert(JSON.stringify(err)); 
                              } 
                  }) //ajax
               });  //click
            }); //ready
    </script> 

Answer 1

You can use an each loop to read the Json Data and prepare the list items

var output = ""; // declare an empty variable inside click function

$("#listOfFoodOptions").empty(); // empty the list

.
.
.

success: function(response){ 

$.each(response, function(index,value){ // loop through the data

output += "<li>"+value.Chef.Name+"</li>"; 

}); 

$("#listOfFoodOptions").append(output).listview().listview('refresh'); // refresh the list

}

.
.
.

.