Return all Records from Table with AJAX

Question

I have a program that sends a user id through AJAX and to a php program that searches a table for all records that match that user id. The problem is that it's only returning one row and I need for it to return all the rows that match. Any ideas on how to do this?

MySQL statement in php:

$id=$_POST["id"];

$sql = mysql_query("SELECT * FROM crime_map WHERE user_id = '$id'");
while($row = mysql_fetch_assoc($sql))

$output[]=$row;

echo json_encode($output);

JS code:

function submitform() {

    var id = document.getElementById('id').value;
    var datastr = 'id=' + id;
    alert(datastr);
    $.ajax({    
        type: "POST",
        url: 'api.php', 
        data: datastr,      
        dataType: 'json',                   
        success: function(data){

            var user_id = data[0];
            alert(user_id);
        }                                   
    })      
}

Answer 1

function submitform() {

    var id = document.getElementById('id').value;
    var datastr = 'id=' + id;
    //alert(datastr);
    $.ajax({    
        type: "POST",
        url: 'api.php', 
        data: datastr,      
        dataType: 'json',                   
        success: function(data){

            //var user_id = data[0];
            //alert(user_id);
            if(data.length > 0)
            {
                for(i=0; i<data.length; i++)
                {
                    alert("User: " + data[i].user_id);
                    // here you have the user_id and any other fields from the table e.g. lat/long
                }
            }
        }                                   
    })      
}

Have a look at the Google Maps Polyline reference for how to plot the points: http://code.google.com/apis/maps/documentation/javascript/reference.html#Polyline