Return a table between an initial and final date period, php + json

Question

I’m trying to return a Dashboard table of reports between a specific date on, but when I click on search it just returns me

Error: Syntaxerror: JSON.parse: Unexpected Character at line 1 column 1 of the JSON data.

Follows my codes:

selectdata.js

$(document).ready( function(){

$("#dataselecionada").click(function() {
    $('#tabeladht22').empty(); //Limpando a tabela
    var dataInicial = $('#datainicial').val();
    var dataFinal = $('#datafinal').val();

    //debugger;

    var postData = {
    "dataInicial": "dataInicial",
    "dataFinal": "dataFinal"
    };

                    alert(dataInicial);
            alert(dataFinal);
    $.ajax({
        type: 'post', 
        data: JSON.parse(postData),//JSON.parse(d),//jQuery.param({ dataInicial: dataInicial, dataFinal: dataFinal}),
        contentType: 'application/json',
        //contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        dataType: 'json', 
        url: 'read_dht22.1.data.php', 
        success: function(d) {
            var dados = JSON.parse(d);
            debugger;
            for (var i = 0; dados.length > i; i++) {
                $('#tabeladht22').append('<tr><td>' + dados[i].temperatura + '</td><td>' + dados[i].umidade + '</td><td>' + dados[i].data + '</td></tr>');
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            debugger;
                alert("Status: " + textStatus); alert("Error: " + errorThrown); 
            }  
    });
});
   });  

read_dht22.1.data. php

`
    <?php
    $con = new mysqli("localhost", "root", "", "aquarium");
    if (mysqli_connect_errno()) trigger_error(mysqli_connect_error());

    $dataInicial = $_GET['dataInicial'];
    $dataFinal = $_GET['dataFinal'];

if ($con->connect_error) {
    die("Connection failed: " . $con->connect_error);
}

//$sql = "SELECT *,DATE_FORMAT(sysdate(), '%d/%m/%Y') as data FROM dht22 WHERE data BETWEEN '%".$dataInicial."%' AND '%".$dataFinal."%' ";
//$sql = "SELECT *,DATE_FORMAT(data,'%d-%m-%Y' ' %H:%i:%s') as data FROM dht22 WHERE data = '".$dataInicial."' AND data='".$dataFinal."' ";
$sql = "SELECT * FROM dht22 ";
$result = $con->query($sql);

if ($result = $con->query($sql)) {

    while ($row = $result->fetch_assoc()) {
        printf ("Temperatura: %s Umidade: %s Data: %s </br>\n", $row["temperatura"], $row["umidade"], $row["data"]);


    }
    $result->free();
}

$con->close();

?>

php report.

                    <h2>Últimos dados</h2>
                <div class="table-responsive">
                    <table class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th>Temperatura</th>
                                <th>Umidade</th>
                                <th>Data</th>
                            </tr>
                        </thead>
                        <tbody id="tabeladht22">

                        </tbody>
                    </table>

Answer 1

I was able to fix the syntax error.

while($row = mysqli_fetch_assoc($result)){
    $json[] = $row; 
}  
  $data['data'] = $json;
  $result =  mysqli_query($con,$sql);
  $data['total'] = mysqli_num_rows($result);

But now I’m not able to perform the return when it is selected the date is returned blank the table and in the console is "null".

I deleted the $.ajax dataType now my table returns this way: