Populating slickgrid(JS) with PHP array

Question

I have this huge slickgrid that users can fill with data. once filled in the data is sent to the server-side with AJAX and then to the database with PHP. then I get the data out of the database and put it inside a PHP array. Now how do I populate the slickgrid with that array data. I cant seem to find the solution to this. because How to I get that php array inside the javascript slickgrid file.

javascript slickgrid for information:

 <script type ='text/javascript'>
  var gridArray;
  var editedRows = []
  
  function CreateColumns() {
      var columns = [
        {id: "hours", name: "uren", field: "hours"},
        {id: "Total_inspection", name: "totaal inspectie", field: "Total_inspection", editor: Slick.Editors.Integer},
        {id: "Per_hour_inspection", name: "Per uur", field: "Per_hour_inspection"},
        {id: "Total_losses", name: "Totaal uitstoot", field: "Total_losses",editor: Slick.Editors.Integer},
        {id: "Per_hour_losses", name: "Per uur", field: "Per_hour_losses"},
        {id: "%_spil", name: "% Spil", field: "%_spil"},
        {id: "%_cumul", name: "% Cumul", field: "%_cumul"},
        {id: "Operator", name: "Operator", field: "Operator",editor: Slick.Editors.Text},
        {id: "SKU", name: "SKU", field: "SKU",editor: Slick.Editors.Text},
        {id: "End_SKU", name: "Tellerstand einde SKU", field: "End_SKU"},
        {id: "Batch", name: "Batch", field: "Batch"}
      ];
    return columns;
  }

 function CreateOptions() {
    var options = {
    editable: true,
      enableCellNavigation: true,
    enableColumnReorder: false,
    autoEdit :false
    };
    return options;
  }
  
  var data = [];
  function CreateData() {
    for (var i = 0; i < 8; i++) {
      data[i] = {
        hours: 6+i+"U",
      };
    }
    
  return data;
  }
  
 console.log(data)

  function CreateGrid(elementId) {
    if (!gridArray) { gridArray = []; }
    
    var data = CreateData();
  //editedRows.push(data)
  var grid = new Slick.Grid("#" + elementId,data, CreateColumns(), CreateOptions());


  gridArray[length] = grid;
//todo tets localstorage
  var columnidx = data[0].Total_inspection
  var columnidx2 = data[0].Total_losses
  var calculation = columnidx2/columnidx
  var columnidx3 = data[0].Per_hour_inspection
  //push(calculation)
  var columnid = data[columnidx] 
    //console.log(calculation,columnidx3)

    grid.onCellChange.subscribe(function (e,args) { 
                 //console.log('arguments',args.item);
               
                editedRows.push(args.item)
                 console.log('arrayrows',editedRows)
             });

  }

console.log(editedRows)
  $('#Savebtn').click(function () {
            console.log(editedRows);
            
            //var UpdatedRows = JSON.stringify(editedRows);
            //console.log(UpdatedRows);

            $.ajax({
                type: "POST",
                url: "request.php",// changed
                data: {arrayOfValues: editedRows},
                success: function (data) {
                    // here comes your response after calling the server
                    alert('Suceeded');
                    alert(data)
                    console.log(data)
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("error : " + jqXHR.responseText);
                }
            });
        });

PHP looks like this :

$stmt = $mysqli->prepare("SELECT * FROM  kicdata");
//$stmt->bind_param('i',$id);
$stmt->execute();
$result = $stmt->get_result();
$return_data = [];
while($row = $result->fetch_assoc()){
    $return_data[]= $row;
}
var_dump($return_data);

UPDATE: the use of ajax solved the part to send the server-side array to the client-side.