Return PHP array in JSON in AJAX

I have the following code:

function atualizaPainelQtdeReservas(){ 
     var dataFiltro = $(".dataFiltro").val();

     $.ajax({  
          url: "crud/painelQuantidadeReservas.php", 
          dataType: 'html',
          data: {dataFiltro:dataFiltro},
          type: "POST", 

         success: function(data){
              $('#resBusca1').html(data[1]);
         },
     });
};

E

 $dataFiltro = $_POST['dataFiltro'];
 $data = implode("-",array_reverse(explode("/",$dataFiltro)));
 $select = "SELECT SUM(numeroPessoas) as total FROM Reserva
            where data = '$data'
            group by hora
            ";
$conexao = conexao();
$PDO = $conexao -> prepare($select);
$PDO -> execute();

$total = array();
while ($obj = $PDO -> fetch(PDO::FETCH_OBJ)){
    $total[]= $obj->total;
}
echo json_encode($total);

SELECT will return the data: 9, 6, 2

I want to return in success the array with the results, but as I did in $ ('# resBusca1'). html (date [0]) what returns me is a [

If I do:

 success: function(data){
 for(var i in data) {
     document.write(data[i]);
 }
 },

the same returns ["9", "6", "2"]

Each result (9,6,2) I want to return in an id in html. Any suggestions?