🎨 Added correct json struct to API responses

ProjetProgWeb/api.php

@@ -21,6 +21,9 @@ $json_object = match ($q) {
     default => NULL,
 };
 
-// TODO : Rajouter la structure status message data
-$json = json_encode($json_object);
+$json = json_encode(array(
+    "status" => 200,
+    "message" => "Results : " . count($json_object), "data" => $json_object
+    ),JSON_PRETTY_PRINT);
+
 print_r($json);

ProjetProgWeb/app.js

@@ -13,8 +13,11 @@ let lastRequest = null
 function requestToApi(author) {
     if (lastRequest === null || (new Date().getTime() - lastRequest) > 1000) {
         lastRequest = new Date().getTime()
+        document.querySelector('#results-count').innerHTML = ""
+        document.querySelector('#results').innerHTML = ""
         loader.style.display = "block"
-        authorName = author
+        authorName = author.replace(/[^a-zA-Z0-9]/g,'')
+        console.log(authorName)
         fetch(`api.php?q=theses&author=${author}`)
             .then(response => response.json())
             .then(data => displayResults(data))
@@ -41,14 +44,10 @@ function displayResults(results) {
         error.classList.add("fade-in");
         errorMessage.innerHTML = results.message
         return;
-    }
-
-    document.querySelector('#results-count').innerHTML = ""
-    document.querySelector('#results').innerHTML = ""
-
+    } else if (results.status === 200) {
         let count = 0
 
-    results.forEach(elem => {
+        results.data.forEach(elem => {
             let result = document.createElement('div')
             result.classList.add('result-element')
             let i = 0
@@ -71,6 +70,7 @@ function displayResults(results) {
         elementsToFade = document.querySelectorAll(".result-element")
         window.addEventListener('scroll', fadeIn);
         fadeIn()
+    }
 }
 
 let lastSearch = ""
@@ -78,16 +78,17 @@ let lastSuggestion = new Date().getTime()
 let suggestionsDisplayed = false
 
 function realTimeDisplay() {
-    let search = document.getElementsByName("author")[0].value
+    let search = document.querySelector('input[name=\'author\']').value
+    search = search.replace(/[^a-zA-Z0-9 ]/g,'')
     if (search.length > 3 && (search !== lastSearch || (new Date().getTime() - lastSuggestion) > 500)) {
         showSuggestions()
         lastSearch = search
         lastSuggestion = new Date().getTime()
         fetch(`api.php?q=authors&author=${search}`)
             .then(response => response.json())
-            .then(function(data) {
+            .then(results => {
                 suggestions.innerHTML = ""
-                data.forEach(elem => {
+                results.data.forEach(elem => {
                     let name = document.createElement('p')
                     name.innerHTML = elem
                     name.addEventListener('click', () => {