Uncaught syntax error when parsing JSON on response using AJAX request: Unexpected token '<', "<br />

Question

I'm using datefrom and dateto to make a dropdown menu and then display the dates between these dates, but it's not showing up and I keep getting this error message in the console.

VM652:1 
        
       Uncaught SyntaxError: Unexpected token '<', "<br />
<b>"... is not valid JSON
    at JSON.parse (<anonymous>)
    at Object.success (<anonymous>:18:30)
    at c (jquery-3.6.0.min.js:2:28327)
    at Object.fireWith [as resolveWith] (jquery-3.6.0.min.js:2:29072)
    at l (jquery-3.6.0.min.js:2:79901)
    at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js:2:82355)

This is the script:

<script>
  // Add an event liste ner for the form submission
  document.querySelector('#submit-button').addEventLi stener('click', function()  {
    // Prevent the default form submission behavior
    event.preventDefault();

    // Get the selected values of the "fromdate" and "todate" dropdown menus
    var fromDate = $('#fromdate').val();
    var toDate = $('#todate').val();

    // Send the AJAX request to the PHP script
    $.ajax({
      type: "POST",
      url: "functions/search-sales_function.php",
      data: { fromDate: fromDate, toDate: toDate },
      success: function (response) {
        // Parse the JSON response
        var salesData = JSON.parse(response);

        // Loop over the sales data and insert it into the table
        for (var i = 0; i < salesData.length; i++) {
          var date = salesData[i]['date'];
          var sales = salesData[i]['total_sales'];
          $('#sales-table tbody').append(`
            <tr>
              <td>${date}</td>
              <td>${sales}</td>
            </tr>`
            );
        }
      },
    });
  });

</script>

This is the php file:

<?php
    include "db_conn.php";
      // Get the values of the "fromdate" and "todate" dropdown menus
      $fromDate = $_POST['fromdate'];
      $toDate = $_POST['todate'];

      // Check the connection
      if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
      }

      // Write a SELECT statement to get the sales data between the selected dates
      $sql = "SELECT date, SUM(sales) as total_sales FROM sales WHERE date BETWEEN '$fromDate' AND '$toDate' GROUP BY date ORDER BY date ASC";

      // Execute the SELECT statement and fetch the results
      $result = mysqli_query($conn, $sql);

      // Loop over the results and add a row to the table for each date
      while ($row = mysqli_fetch_assoc($result)) {
        $date = $row['date'];
        $sales = $row['total_sales'];
        echo "<tr>
                <td>$date</td>
                <td>$sales</td>
              </tr>";
      }

      // Close the connection
      mysqli_close($conn);
    ?>

I want to display rows with dates between the selected dates but the error keeps showing up in the console log and the table is not showing

Answer 1

This error is related to the response error of your ajax method. This code sends the result of the ajax request. You should use echo json_encode($data); in your php file.

$data = [];
 while ($row = mysqli_fetch_assoc($result)) {
        $data[] = $row;
        echo json_encode($data);
 }