I have experiencing some problems with fetching the grandchilds from my db table: referrals. However, it seems that my code can actually fetch the usernamee of my grandchilds. But it is not appearing below my child's line and there is no error in INSPECT.
Please see the OUTPUT image I attached here: Attached here are the images of the output of my code:
This is the UPDATED database table name referrals:
I used Javascript to fetch the data's inside "referrals" table
<!-- GENEOLOGY TREE -->
<div class="tree">
<?php $id = 1; ?>
<ul>
<li>
<div id="parent_account"><a href="#"><img src="user.png" alt="Avatar" style="width:50px"/></br>Parent<?php echo $id; ?></a></div>
</li>
</ul>
</div>
<!-- END OF GENOLOFY TREE -->
<script>
$(document).ready(function(){
// start get children
var _id = "<?php echo $id ?>";
var child = "";
var child_id = [];
var gchild_id = [];
var count = 0;
$.post('get_child_referrals.php', { id:_id }).done(function(response){
var response = jQuery.parseJSON(response);
var referred = response["referred"];
var referred_len = response["referred"].length;
if(referred_len > 0){
child += "<ul>";
for(var x = 0; x < referred_len; x++) {
console.log(referred[x]["usernamee"]);
count += 1;
child_id[x] = referred[x]["id"];
child += "<li id='child"+x+"'><a href="+x+"><img src='user.png' alt='Avatar' style='width:50px'/><br>Child "+referred[x]["usernamee"]+"</a></li>";
}
child += "</ul>";
console.log(child);
$("#parent_account").append(child);
// start get grandchildren
// console.log(child_id);
var gchild_len = child_id.length;
// console.log(gchild_len);
for(i = 0; i < gchild_len; i++){
gchild = "";
_id = child_id[i];
// console.log(_id);
$.post('get_child_referrals.php', { id:_id }).done(function(response){
gresponse = jQuery.parseJSON(response);
greferred = gresponse["referred"];
greferred_len = gresponse["referred"].length;
if(greferred_len > 0){
gchild += "<ul>";
for(y = 0; y < greferred_len; y++) {
gchild_id[y] = greferred[y]["id"];
console.log(greferred[y]["usernamee"]);
gchild += "<li id='gchild"+y+"'><a href="+y+"><img src='user.png' alt='Avatar' style='width:50px'/><br>Child "+greferred[y]["usernamee"]+"</a></li>";
}
gchild += "</ul>";
console.log($("#child"+i).length);
console.log(gchild);
$("#child"+i).append(gchild);
}
});
}
// end get grandchildren
}
});
// end get children
});
</script>
get_child_referrals.php
include('connectdb.php');
$response = array();
$response["referred"] = array();
$id = $_POST['id'];
$sql = "SELECT * FROM referrals WHERE referral_id='$id'"; // MY RECRUITERS
$result = $conn->query($sql);
while($data = $result->fetch_assoc()) {
array_push($response["referred"], $data);
}
echo json_encode($response);