how to make loop of json data from php using ajax

Question

In my php file

foreach($qry_1 as $v)
{       
    $subcat=array('title'=>$v['title'],'cat_id'=>$v['cat_id']);
    echo json_encode($subcat);
}

in my jquery file

$.ajax({
    type:'POST',
    url:"php/process.php",
    data:{cat_id:cat_id},
    dataType:"json",
    success: function(data){

        //how to loop through data to show in div
    });        
}
})

in my html file

<div id="title">

</div>

i want to show my json data in div so how can i loop through the json data received from php at jquery and how can i show it in my html file

Answer 1

try changing php to:

foreach($qry_1 as $v)
{   
    // add to subcat array in each iteration    
    $subcat[]=array('title'=>$v['title'],'cat_id'=>$v['cat_id']);

}
//output final array
echo json_encode($subcat);

Then in ajax callback:

$.each(data, function(_, item){
    $('#title').append('<p> Title: ' + item.title + '</p>'); 
});