How to get MySQL data from PHP to Javascript via XMLHttpRequest and output the data chronologically?

I’ve managed to get the MySQL data that I needed in order for me to display it onto the notification’s container. Now I have a problem at manipulating the data I needed. Instead of printing the objects one by one, it prints the same object at multiple times. Here is the source code.

PHP MySQL data getter

<?php
    $host = 'localhost';
    $username = 'root';
    $password = '';
    $dbname= 'notifications';

    $dsn = "mysql:host=$host;dbname=$dbname";

    $connection = new PDO($dsn, $username, $password);

    $sql = 'SELECT * from notifications ORDER by date';
    $query = $connection->prepare($sql);
    $query->execute(PDO::FETCH_OBJ);

    $array_list = [];

    while($row = $query->fetch()){
        array_push($array_list, $row);
    }

    echo json_encode($array_list);

?>

Javascript that gets the value of MySQL data from PHP file. Don’t mind the long string, it’s just an element that will be added up to the notification container when scrolled down.

    var notificationContainer = document.getElementById('notifications-container');
    notificationContainer.addEventListener("scroll", myPageScroll);
    var index = -1;

    function myPageScroll(){

        var theScrollTop = notificationContainer.scrollTop;
        var theScrollHeight = notificationContainer.scrollHeight;
        var height = notificationContainer.clientHeight;


        //THIS IS WHERE I HAVE A PROBLEM. IT PRINTS THE SAME OBJECT 5 TIMES.
        if(theScrollTop + height >= theScrollHeight){
            for(i = 0; i < 5; i++){
                testing();
                index = index + 1;
            }
            
        }
    }

    function testing(){
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "data_getter.php");
        xhr.onload = function(){
            var jsvar = this.response;
            jsvar = JSON.parse(xhr.responseText);
            console.log(jsvar[index]);
            notificationContainer.insertAdjacentHTML('beforeend', jsvar[index].notification_content);
        };
        xhr.send();
    }

Html file

<div class="drop-down-container" id="notifications-container"></div>

<script src="header.js"></script>

Though when I printed the objects into the console, it has the organized data.

Answer

This is because when you get any fetch response the for loop has done iterating so index (inside the testing function) always has the same value. You need to pass index has parameter of testing function.

var notificationContainer = document.getElementById('notifications-container');
    notificationContainer.addEventListener("scroll", myPageScroll);
    var index = -1;

    function myPageScroll(){

        var theScrollTop = notificationContainer.scrollTop;
        var theScrollHeight = notificationContainer.scrollHeight;
        var height = notificationContainer.clientHeight;


        //THIS IS WHERE I HAVE A PROBLEM. IT PRINTS THE SAME OBJECT 5 TIMES.
        if(theScrollTop + height >= theScrollHeight){
            for(i = 0; i < 5; i++){
                testing(index); // pass index as parameter
                index = index + 1;
            }
            
        }
    }

    function testing(index){ // index has been added as parameter
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "data_getter.php");
        xhr.onload = function(){
            var jsvar = this.response;
            jsvar = JSON.parse(xhr.responseText);
            console.log(jsvar[index]);
            notificationContainer.insertAdjacentHTML('beforeend', jsvar[index].notification_content);
        };
        xhr.send();
    }