How can I populate the pricing data associated with date dropper by Felix G?

I am using Date Dropper javascript to show prices on a js calendar.

// Get pricing data (this object simulates the way you should obtain your pricing data object)
// 1. Get pricing data (this object simulates the way you should obtain your pricing data object)

let pricingData = {
  "2023/09/01": {
    price: 35,
    average: 1 //low
  },
  "2023/09/02": {
    price: 54,
    average: 2 //mid
  },
  "2023/09/03": {
    price: 76,
    average: 3 //high
  },
  "2023/09/04": {
    price: 19,
    average: 1
  },
  "2023/09/05": {
    price: 20,
    average: 1
  }
  // and so on...
};

I am not using the average so just need date and price.

When ı hardcode the dates as above, the script is working perfectly. But I need to be able to update the prices regularly so I created a table in phpAdmin.

I created a table in phpAdmin and access it to populate a php array. I change the date format to be with slashes as in the example:

<?php


include ("dbnazar.php");

$connect=mysqli_connect("$host","$username","$password","$database");
if (mysqli_connect_errno($connect))
{
    printf("Connect1 failed: %sn", mysqli_connect_error());
    exit();     
}
$query="SELECT avail_date, avail_price1 
FROM Availability
ORDER BY avail_date";

$result = $connect->query($query) or die($mysqli->error.__LINE__);

$numparam=mysqli_num_rows($result);

// GOING THROUGH THE DATA
if($result->num_rows > 0) 
{
    while($row = mysqli_fetch_object($result)) 
    {   
    $newdate = str_replace('-', '/', $row->avail_date);
    $newprice = number_format($row->avail_price1, 0);
    $priceArray[] = array('day'=>$newdate, 'price'=>$newprice);
    }
}

else 
{
    echo "No rates founds for these dates.";        
}

    ?>

Then I copy the php table to a javascript one via Json:

let pricingData = JSON.parse('<?= json_encode($priceArray); ?>');
console .log(pricingData);

and the rest of the script remains the same:

// 2. Initialize Datedropper by setting up the onRender callback

new dateDropper({
  selector: '.economy',
  range: false,
  expandable: true,
  expandedOnly: true,
  minDate: minDate,
  maxDate: maxDate,
  minYear: year,
  maxYear: yearmax,
  startFromMonday: true,
  format: "dd/mm/y",
  lang: "en",
  showArrowsOnHover: false,
  overlay: false,
  doubleView: false,
  startFromMonday: true,
  changeValueTo: '.flightdate',
  jump: "1",
  autoFill: true,
  loopAll: true,
  onRender: function(dates) {

    Object.keys(dates).forEach(function(day){

      let pickerDay = dates[day];
      let pricingDay = pricingData[day];
      console .log(pricingDay); 
      
      let average = 'low';
      
      if(pricingDay.price==0) {
        average = 'high';
        pricingDay.price="---";
      }
      if(pricingDay.price=='---') {
        average = 'high';
      }

      // Create the price node
      let customLabel = document.createElement('div');
      //customLabel.className = `price price--${averageClass(pricingDay.average)}`;
      customLabel.className = `price price--${average}`;
      if(pricingDay.price=="---") {
        customLabel.innerHTML = `${pricingDay.price}`;
      }
      else {
        customLabel.innerHTML = `${pricingDay.price} €`;
      }

      // Append the price node to the day node
      pickerDay.node.appendChild(customLabel);

    });
     
  }
});

However this does not show the prices – the console shows an error

Uncaught TypeError: Cannot read properties of undefined (reading 'price')
    at Newbookingform3.php:167:18
    at Array.forEach (<anonymous>)
    at Object.onRender (Newbookingform3.php:159:24)

I also look at my array in the console and see my date is called date but in the datedropper example in the array it seems to have no name?

let pricingData = {
  "2023/09/01": {
    price: 35,
    average: 1 //low
  },

How can I create an array in exactly the same format as above ? I just need to populate this price table somehow in a way that the data can be updated easily.