Undefined value document.getElementById-CodePudding

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

CodePudding user response：

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

CodePudding user response：

Try this...

$.each(result,function(i)
        {
            document.getElementById("DataKabupaten").innerHTML  ="ID :"   result[i].IDKabupaten  "<br>Kab :"   result[i].Kabupaten 
             "<br>ID2 :"   result[i].IDProvinsi   "<br><br>";
        });
result.forEach((singleResult, index) => {
// and then do your thing here. I don't use jquery but I took a quick look at their docs and your loop doesn't look right. This is the same function that jquery is calling under the hood.
})

Delete your code... I only left it in there so you could compare.