$_GET returns null from Ajax fetch() - php

Question

So, I am making a trivia game. Here is my PHP code and my Ajax Code. The problem is, the variable $categoryName in my php code keeps returning null no matter what I do. As a result, in my JS code, when I try to fetch the url, I keep getting this error: "Uncaught (in promise) SyntaxError: Unexpected token . in JSON at position 0
at parse ()"
This code is not in a state of completion yet, but this issue is preventing me from moving forward. Any ideas? These are two different files on an AMPPS server
PHP File
/* Step 2: Write a trivia.php code to read the .txt files (from particular category specified by the fetch()) and output as JSON. You can use $_GET[“mode”], scandir and json_encode().
What you need to do is given the category query parameter from the trivia.js, create a random question (e.g. using array_rand()) send it back to the browser.
*/
//handles category names
$triviafiles = "trivia/"; //questions and answers themselves
$files = scandir("trivia/");
$categories = implode('<br>', $files);
echo $categories;
//gets questions
$categoryName = strtolower($_GET["name"]); //always is null. Don't know why
$trivia = glob($triviafiles.$categoryName."/*.txt");
//categoryName still shows up as Null. Hardcoding a name in works, but that obviously defeats the purpose.
foreach($trivia as $question){
$answer = file_get_contents($question);
}
echo(json_encode(array("question" => $question, "answer" => $answer)));
?>
JavaScript File
window.onload = function () {
"use strict";
let showCat = document.getElementById("view-all");
showCat.onclick = fetchCategories;
let show_answer = document.createElement("button");
show_answer.classList.add("controls");
show_answer.innerHTML += "Show Answer";
document.getElementById("question-view").append(show_answer);
// show_answer.onclick =
};
function displayCategories() {
document.getElementById("categories-heading").className = null;
document.getElementById("category-view").className = null;
}
function selectedText(category){
let categories = document.querySelectorAll("li");
for(let i = 0; i<categories.length; i++){
categories[i].classList.remove("selected-category");
}
category.classList.add("selected-category");
category.onclick = showTrivia;
}
function fetchCategories() {
let hrx = new XMLHttpRequest();
hrx.onload = displayCategories;
hrx.open("GET", "trivia.php?mode=category");
hrx.send();
hrx.onreadystatechange=function(){
if(hrx.readyState === 4 && hrx.status === 200) {
let list = hrx.responseText;
list=list.split("<br>");
for (let i = 0; i<list.length; i++){
let category = document.createElement("li");
category.innerHTML += list[i];
document.getElementById("categories").appendChild(category);
}
}
let categories = document.querySelectorAll("li");
for(let i = 0; i<categories.length; i++){
categories[i].classList.remove("selected-category");
categories[i].addEventListener("click",function(){selectedText(categories[i])}, false);
}
}
}
//include this code, based on: https://developers.google.com/web/updates/2015/03/introduction-to-fetch
function checkStatus(response){
if (response.status >= 200 && response.status < 300) {
return response.text();
}else{
return Promise.reject(new Error(response.status + ": " + response.statusText));
}
}
function displayQuestion() {
document.getElementById("question-view").className = null;
document.getElementById("card").className = null;
}
function showTrivia() {
let currentCategory = document.querySelector(".selected-category");
console.log(currentCategory);
let url = "trivia.php?mode=category";
url += "&name=" + currentCategory.innerHTML;
console.log(url);
fetch(url, {method: "GET"})
.then(checkStatus)
.then(JSON.parse) // main issue. Parsing error
.then(displayQuestion);
}

Answer 1

(i can't comment yet, but here's my take:)
as others have explained, you have 2 AJAX calls to trivia.php
in the first one (when user clicks on "view-all") you don't specify name in the GET
in the second one (when user clicks on a specific category) you specify name in the GET
during the first load of trivia.php it's logical that $categoryName is null, because you don't specify it
are you sure you are also checking the second load of trivia.php? because it seems that $categoryName should be filled in that time.