How to do the ajax + json using zf2?

Question

i am using zf2. i want to load my second drop down by using the ajax call. i have tried with following code. i can get hard coded values. but i dont know how to add database values to a array and load that values to the drop down using ajax.

Ajax in phtml :

<script type="text/javascript">
$(document).ready(function () {

$("#projectname").change(function (event) {

    var projectname = $(this).val();
    var projectkey = projectname.split(" - ");
    var projectname = {textData:projectkey[1]};


    //The post using ajax
    $.ajax({
            type:"POST",
            // URL : / name of the controller for the site / name of the action to be                         
            //                                                 executed
            url:'<?php echo $this->url('userstory', array('action'=>'answer')); ?>',
            data:projectname,
            success: function(data){ 

                //code to load data to the dropdown

            },
            error:function(){alert("Failure!!");}


           });

   });
  });

</script>

Controller Action:

  public function answerAction() {

    // ead the data sent from the site
    $key = $_POST ['textData'];

    // o something with the data
    $data= $this->getProjectTable ()->getkeyproject( $key );
    $projectid = $data->id;

    $projectusers[] = $this->getRoleTable()->fetchRoles($projectid);
    // eturn a Json object containing the data

    $result = new JsonModel ( array (
            'projectusers' => $projectusers
    ) );
    return $result;
}

DB query :

   public function fetchRoles($id) {
    $resultSet = $this->tableGateway->select ( array (
            'projectid' => $id 
    ) );

    return $resultSet;

}

Answer 1

This is what i did in my controller. finaly done with the coding.

public function answerAction() {

    // ead the data sent from the site
    $key = $_POST ['textData'];

    // o something with the data
    $data= $this->getProjectTable ()->getkeyproject( $key );
    $projectid = $data->id;
    $i=0;
    $text[0] = $data->id. "successfully processed";
    $projectusers = $this->getRoleTable()->fetchRoles($projectid);

    foreach ($projectusers as $projectusers) :
    $users[$i][0] = $projectusers->username;
    $users[$i][1] = $projectusers->id;
    $i++;
    // eturn a Json object containing the data
    endforeach;
    $result = new JsonModel ( array (
            'users' => $users,'count'=>$i
    ) );
    return $result;
}

and the ajax is like this

<script type="text/javascript">
 $(document).ready(function () {

$("#projectname").change(function (event) {

    var projectname = $(this).val();
    var projectkey = projectname.split(" - ");
    var projectname = {textData:projectkey[1]};


    //The post using ajax
    $.ajax({
            type:"POST",
            // URL : / name of the controller for the site / name of the action to be                         
            //                                                 executed
            url:'<?php echo $this->url('userstory', array('action'=>'answer')); ?>',
            data:projectname,
            success: function(data){ 
                // alert(data.users[0][0]+" - " + data.users[0][1] );

                 var count= data.count;
                 alert(count);
                 $('#myDropDown').empty();
                 for(var i=0;i<count;i++){

                     $('#myDropDown').append($('<option></option>').attr('value', data.users[i][1]).text(data.users[i][0]));

                 }

            },
            error:function(){alert("Failure!!");}


           });

});
  });

 </script>

used the same zf2 query to access the database. thanks for the help everyone :)