Undefined value document.getElementById [closed]

i have a problem right here. i want to make a web service requestor using provider that i already make. the problem is i always getting undefined values for ID, Kab, and ID2. can someone help me fix the code in requestor?

this is the provider

$sql="SELECT * FROM mytable";
$query = mysqli_query($con, $sql);
$result = array();
while($row = mysqli_fetch_array($query)){
    array_push($result, array(
        'IDKabupaten' => $row['IDKabupaten'],
        'Kabupaten' => $row['Kabupaten'],
        'attribut' => array(
            0 => array(
                'IDProvinsi' => $row['IDProvinsi']
            )
        )
    ));
}
echo json_encode(array('mytable' => $result));
?>

this is the requestor

<script type="text/javascript">
    $.getJSON("http://localhost/json2/wsp_coba2.php", function(result){
        console.log(result);
        $.each(result,function(i)
        {
            document.getElementById("DataKabupaten").innerHTML +="ID :" + result[i].IDKabupaten +"<br>Kab :" + result[i].Kabupaten 
            +"<br>ID2 :" + result[i].IDProvinsi + "<br><br>";
        });
    });
</script>

im getting

ID : undefined
Kab : undefined
ID2 : undefined

Answer

const result = { "mytable": [ { "IDKabupaten": "3301", "Kabupaten": "CILACAP", "attribut": [ { "IDProvinsi": "33" } ] }, { "IDKabupaten": "3302", "Kabupaten": "BANYUMAS", "attribut": [ { "IDProvinsi": "33" } ] } ] };
$.each(result.mytable,function(i) {
  console.log(result.mytable[i].IDKabupaten);
  $.each(result.mytable[i].attribut, function (j) {
    console.log(result.mytable[i].attribut[j].IDProvinsi)  
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

you can check it