Ajax, PHP Problems when receiving data

Question

Okay, guys, here’s my problem. I have a JS function to make a query in mysql database via ajax, it returns apparently correctly but when I try to access the value of "Undefined" This is an Alert(Sponse); being "Answer" ajax response

however at the time I try to access example Answer[0]. student, result is Undefined.

JS

var hora = $this.find('h1').text();
    $.ajax({
        type: "POST",
        dataType: "html",
        url: "alunos.php",
        data: { 'hora': hora},
        success: function(response){
            alert(response);
            // for(var i=0;response.length>i;i++) {
            //    console.log( response[i].nome);
            // }
        }
    });

<?php
header("Content-Type: text/html; charset=UTF-8");

    $mysqli = new mysqli('localhost', 'root', 'vagrant', 'webfit');
    $hora = filter_input(INPUT_POST, 'hora');
    $sql = "SELECT aluno.nome as aluno from aula, aluno_aula,aluno where aluno.id = aluno_aula.aluno_id AND aluno_aula.aula_id=aula.id AND aula.horaini='{$hora}';"; //monto a query
    $query = mysqli_query($mysqli,$sql); //executo a query]
    while($row = mysqli_fetch_assoc($query)){
        $vetor[] = array_map('utf8_encode', $row);
    }
    echo json_encode($vetor);
?>

PHP

Answer 1

If you are able to use Alert, you are receiving a string, convert the json string to object:

var dados = JSON.parse(response);

You can change dataType too, this way:

var hora = $this.find('h1').text();
$.ajax({
    type: "POST",
    dataType: 'json',
    url: "alunos.php",
    data: {'hora': hora},
    success: function(response){

    }
});

Example:

$(function(){
  var string = '[{"aluno":"Emilie Dickens"},{"aluno":"Dr. Kenny Reilly Sr."}]';

  var dados = JSON.parse(string);
  alert(dados[0].aluno);
  alert(dados[1].aluno);
});

Link with example working: https://jsfiddle.net/ws5guo6m/1/