Why can't i fetch data from my SQL database, in a html document, using php?

Question

So I am writing a API, on the front-end it uses HTML, JS and CSS, and on the back end it uses PHP which will have access to my SQL database.

My task is once a button is clicked, create a function that will send information that is encoded in JSON off to the .php file, there I need to decode that object from JSON to PHP, then connect to the SQL database, and return relevant information encoded in JSON back to the HTML page, and later functionality will be able to update/delete certain data.

This API uses two main pages being the HTML and PHP files, along with the SQL database. Can somebody tell me why this is not working and how I can fix it? To clarify I would like to be able to select a radio button option, then press the app_list_button, which will return all Applications sorted by app_name or their review rating. Any help will be greatly appreciated and if I am able to structure anything better please let me know.

index.html

<div id='app_content'>
  <label>Refine search by</label>
  </br>
  <input type="radio" id="name_radio">
  <label>Name</label>
  </br>
  <input type="radio" id="rating_radio">
  <label>Rating</label>
  </br>
  <button id="app_list_button" onclick="load_list_function()">View App List</button>
  </br>
  <p id='app_list_p'></p>
  <input type="submit" name="app_detail_button" value="View App 
                Details">
  </br>
</div>
</div>
</body>
<script>
  var app_list_bttn = document.getElementById('app_list_button');
  var radio = {};
  //List apps
  function load_list_function() {
    var xhr = new XMLHttpRequest();

    //name radio checked
    radio.sortByName = document.getElementById('name_radio').checked;
    //rating radio checked
    radio.sortByRating =
      document.getElementById('rating_radio').checked;

    document.getElementById('app_list_p').innerHTML = this.responseText;

    xhr.open('GET', 'API.php', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(radio));
  }
</script>

API.php

<?
$conn = mysqli_connect('localhost', '30319329', 'password', 'Application');
$errors = array();
$json_response = array();

$radio_req = file_get_contents('php://input');
$radio_result = json_decode($radio_req);

//get a list of all apps
//encode into json to send back
if ($radio_result - > sortByName == true) {
  //order by name
  $results = mysqli_query($conn, "SELECT app_name FROM App");

  while ($row = mysqli_fetch_assoc($results)) {
    // You can modify the $row here as well, or filter out certain rows
    $json_response[] = $row;
  }
  header("Content-Type: application/json");
  echo json_encode($json_response);
} else($radio_result - > sortByRating == true) {
  //order by rating
  //order by name
  $results = mysqli_query($conn, 'SELECT app_name, rating FROM App, App_Review ORDER BY rating ');

  while ($row = mysqli_fetch_assoc($results)) {
    // You can modify the $row here as well, or filter out certain rows
    $json_response[] = $row;
  }

  header("Content-Type: application/json"); echo json_encode($json_response);
}
$conn - > close();
?>

Answer 1

Most likely the issue is this:

file_get_contents('php://radio');

That will not give you anything, it needs to be:

file_get_contents('php://input');

Also, when you do:

document.getElementById('app_list_p').innerHTML = this.responseText;

you are setting the innerHTML before you've even done the ajax request - this in this context is the window, so this.responseText will always be undefined. You need to do it more like:

xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        document.getElementById('app_list_p').innerHTML =xhr.responseText;
    }
}