how to take a data from a json object in ajax

I have this code to create a table and insert the data of the type json array:

$.ajax({
    url: '<?php echo base_url(); ?>index.php/Manager/metricsAdvocates',
    type:  'post',
    data:  {'sup':sup, 'dateM':dateM},
    dataType: 'json',

     success: function(response){

 var i=0;
 var vhur1 = "";
 var attendance1 = "";
 var advocate1= "";

       $.each(response,function(index,data){
          var data = JSON.stringify(response);

         vhur1 = data[i]["vhur"];
         attendance1 = data[i]["advocate"];
         advocate1 = data[i]["attendance"];

              var tabla = "";
              tabla+="<tr>";
              tabla+="<td id='vhur' class='text-center'>"+vhur1+" </td>";
              tabla+="<td id='advocate' class='text-center'> "+attendance1+" </td>";
              tabla+="<td id='attendance' class='text-center'>"+advocate1+"</td>";

              tabla+="</tr>";
            $('#tableAtt').append(tabla);

                          i++;
        });
      },
     });

The problem is that I get what I'm inserting in the undefined, as if that key did not exist. in the console he prints the arrangement to me, but of type json, and I want to take a data that is inside that arrangement with this line:

So I get the table where it says undefined I need the values of the object json, and the keys are the name of the culms osea vhur, advocates, attendance in these three lines I refer to the clue of each and I keep it in a variable that is what I'm going to show in the td.

         vhur1 = data[i]["vhur"];
         attendance1 = data[i]["advocate"];
         advocate1 = data[i]["attendance"];

if so, do I take a data from the json object or is there another way?