Proper way of rendering Json in html

Question

I have a form with a very long list of names in a dropdown select tag.I want to implement the jquery auto complete but my current code does not work.

public function executeNew($r) {
    $this->getResponse()->setContentType('application/json');
    $cityId = Doctrine_Core::getTable('City')->getCity();
    return $this->renderText(json_encode($cityId));
    $this->form = new VotersForm();
    if($r->isMethod('post')) {
        $this->errors = array();
    $this->form->bind($r->getParameter('voters'));
        if($this->form->isValid()) {
            $values = $this->form->getValues();
            $firstname = $values['firstname'];
            $middlename = $values['middlename'];
            $lastname = $values['lastname'];
            $birthday = $values['birthday'];
            $email = $values['email'];
            $address = $values['address'];
           // $city = $values('city_id');
            $city = $cityId;
            $cellphone = $values['mobile_no'];
            $telephone = $values['telphone_no'];
            $profession = $values['profession_id'];
            $status = $values['civil_status'];
            $comments = $values['comments'];
            Doctrine_Core::getTable('Voters')->AddNewVoters($firstname,$middlename,$lastname,$birthday,$email,$address,$city,$cellphone,$telephone,$profession,$status, $comments,$date= date('Y-m-d, h:i:s'));
            $this->getUser()->setFlash("good", "You are added successfully");
            $this->redirect('duterte/showtotals');
        } else {
            $this->errors = 'Oops.Something is missing.Please check for required fields';
        }
    }
}

The $city field is related to model(City) in a one to many relationship.Using the code above, I can 'pull' json from the related model,but my problem is, my code does not display the form properly.Instead, it will display something like this

{"Candon":"Candon","Vigan":"Vigan","Alilem":"Alilem","Banayoyo":"Banayoyo","Bantay":"Bantay","Burgos":"Burgos","Cabugao":"Cabugao","Caoayan":"Caoayan","Cervantes":"Cervantes","Galimuyod":"Galimuyod","Gregorio }

How to properly display the form, with the autocomplete dropdown?

  <?php if(isset($errors) && !empty($errors)):?>
    <div class="alert alert-warning"><?php echo $errors ?></div>
 <?php endif ?>
 <div class="page-header">
   <h3>Register here</h3>
 </div>
 <form method="post" class="form-horizontal">
 <div class="form-group">
    <div class="col-sm-10">
        <?php echo $form['firstname']->renderRow(array('class'=>'form-control','placeholder' => 'firstname')) ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-10">
        <?php echo $form['middlename']->renderRow(array('class'=>'form-control','placeholder' => 'middlename')) ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-10">
        <?php echo $form['lastname']->renderRow(array('class'=>'form-control','placeholder' => 'lastname')) ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-2">
        <?php echo $form['birthday']->renderRow(array('class'=>'form-control','placeholder' => 'birthday')) ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-10">
        <?php echo $form['address']->renderRow(array('class'=>'form-control','placeholder' => 'address')) ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-10">
        <?php echo $form['city_id']->renderRow(array('class'=>'form-control required city_autocomplete')) ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-10">
        <?php echo $form['profession_id']->renderRow(array('class'=>'form-control')) ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-10">
        <?php echo $form['civil_status']->renderRow(array('class'=>'form-control')) ?>
    </div>
</div>
 <div class="form-group">
    <div class="col-sm-10">
        <?php echo $form['comments']->renderRow(array('class'=>'form-control','placeholder' => 'why Duterte')) ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <input type="submit" value="I Will Vote Duterte For President" class="btn btn-primary" />
        <input type="button" class="btn btn-danger" onclick="resetFunction()" value="Reset form" />
    </div>  
</div>

Answer 1

You will need to set up the drop-down select widget in your form before attempting to apply renderRow on the form element. Here's an example:

$cityArray = array();
foreach($cityId as $city) {
    //create an array from the City models
    $cityArray[$city->city_id] = $city->city_name; 
    //set the key to be the value in your dropdown select and the value to be the displayed label.
}
$form->setWidget('city_id', new sfWidgetFormChoice(array(
  'choices'   => $cityArray, //your list of cities, in an associative array
  'default'   => '0' //choose a default key/value
)));

Source: Symfony Documentation