php - How to access JSON values returned by AJAX call -

i have written ajax code fetch mysql data , show on html page. output not showing on page.

what doing wrong?

php:

function nav() {     $this->dbconnect();     $qry="select pid, ptitle pages pagepub='1' order porder asc";     $result=mysqli_query($this->connect,"$qry") or  die('mysql error!  ' . mysqli_error());     $results = array();     while($row=mysqli_fetch_row($result)) {         $results[] = $row;     }     echo json_encode($results);     $this->dbclose();        } 

here output of php file:

[     {         "pid":"1",         "ptitle":"one time registration tips"     },     {         "pid":"2",         "ptitle":"first men in india"     },     {         "pid":"3",         "ptitle":"first women in india"     } ] 

javascript / html:

<div id="output">this element accessed jquery , text replaced</div> <script type="text/javascript" src="dist/js/jquery.js"></script> <script type="text/javascript">  $(function () {     jquery.ajax({         url: 'http://keralapsctuts.com/app/category.php',         data: "",         datatype: 'json',          success:function(data) {              var id = data[0];              //get id             var title = data[1];           //get name              $('#output').html(" <a class='list-group-item' href='"+id+"'"+title+" <i class='fa fa-chevron-right pull-right'></i></a>");          }      }); });   </script> 

as returning more rows, should use for if want iterate through them.

success:function(data) {   var result = "";   for(var i=0; < data.length; i++) {     var id = data[i]["pid"];              //get id     var title = data[i]["ptitle"];        //get name     result += "<a class='list-group-item' href='"+id+"'>"+title+"<i class='fa fa-chevron-right pull-right'></i></a>";   }   $('#output').html(result); //set output element html }