jquery - Creating LIs on the fly doesn't work as I want -

i have symfony 2 function called via ajax template. function:

/**  * subcategories based on $parent_id parameter  *  * @route("/category/subcategories/{parent_id}", name="category_subcategories", options={"expose"=true})  * @method("get")  */ public function getcategories($parent_id = null) {     $em = $this->getdoctrine()->getmanager();     $entities = $em->getrepository('categorybundle:category')->findby(array("parent" => $parent_id));      $subcategories = array();     foreach ($entities $entity) {         $subcategories[] = array($entity->getid() => $entity->getname());     }      $response = new jsonresponse();     $response->setdata($subcategories);      return $response; } 

that functions returns json this:

[{"27":"test10"},{"28":"test11"},{"29":"test12"}] 

so wrote jquery function parse , display elements:

$(function() {     $("a.step").click(function() {         var id = $(this).attr('data-id');         $.ajax({             type: 'get',             url: routing.generate('category_subcategories', {parent_id: id}),             datatype: "json",             success: function(data) {                 if (data.length != 0) {                     var lis = "";                     $.each(data[0], function(i, v) {                         lis += '<li><a class="step" data-id="' + + '" href="#">' + v + '</a></li>';                     });                      $('#categories').html(lis);                 }             }         });     }); }); 

but it's not working because first element of json array showed, wrong in code? advice?

$.each(data[0], function(i, v) {   lis += '<li><a class="step" data-id="' + + '" href="#">' + v + '</a></li>'; }); 

here data[0] {"27":"test10"}, want data.

try this:

$.each(data, function(index, value) {   $.each(value, function(i, v) {     lis += '<li><a class="step" data-id="' + v + '" href="#">' + v + '</a></li>';   } });