Displaying information from php arrays in html

I have an apache webserver and a browser plugin. The Plugin does check form which website something is downloaded from and checks if it is downloaded from a specific domain. If so it fetches some data to my server for example the username, id from the user, the time remainng for the download, the status (downloading) and I use regex to extract a number from the domain which will also be fetched over to the server. On the server I receive the data and check if the number is in my list of devices otherwise its added. Now I want to show the downloads that are active for each device in my html file and Im unsure on how use it in my <script> tag over at the index.html because in the php file I need to safe all downloads at the moment and in my html I want to display the downloads. Here is my html code whcih is used to show the devices, status etc. :
Please note most of these variables arent used correctly thats why im asking, sry if it isnt formatted correctly it is inside my code but for some reason if I paste it its not

<section> <div class="container-fluid pt-5 pb-5 bg-main"> <div class="container rounded pt-3 pb-3 content-box"> <div class="container"> <div class="row fw-bold border-bottom pb-2 mb-2"> <div class="col-2">Gerät</div> <div class="col-4">Status</div> <div class="col-6">Info</div> </div> <div id="deviceGrid"></div> <script> const Data_file = "api/received.json"; const refreshInterval = 999; let firstLoad = true; async function loadData() { try { const response = await fetch(`${Data_file}?_=${Date.now()}`); const devices = (await (await fetch(devicesFile + "?_=" + Date.now())).json()).JsonDevices; devices.forEach(device => { const row = document.createElement("div"); row.className = "row align-items-center border-bottom py-2"; // Spalte 1: Gerätenummer const colDevice = document.createElement("div"); colDevice.className = "col-1"; colDevice.textContent = device; //Icon zum kopieren der Seriennummer und Softwareversion const colIcon = document.createElement("div"); colDevice.className = "col-1"; colDevice.textContent = device; //Status frei/besetzt kommt später!!! const colStatus = document.createElement("div"); colDevice.className = "col-2"; //colDevice.textContent = device; //Download aktiv ja oder nein? Mit Icons arbeiten const colDownloadActive = document.createElement("div"); colDevice.className = "col-2"; colDevice.textContent = device; if (downloadActive = true) { colStatus.innerHTML = '<img src="pictures/reject.png">'; '< span class="text-danger" >Download aktiv</span > '; } else { colStatus.innerHTML = '<img src="pictures/approved.png">'; '< span class="text-danger" >keine Downloads</span > '; } //Wer lädt herunter über Token const colDownloadFrom = document.createElement("div"); colDevice.className = "col-3 "; colDevice.textContent = device; //Wie Lange geht der download noch const colDownloadDuration = document.createElement("div"); colDevice.className = "col-2"; colDevice.textContent = device; //Anzahl der Downloads const colNumberofDownloads = document.createElement("div"); colDevice.className = "col-1"; colDevice.textContent = device; }); if (!response.ok) throw new Error(`HTTP ${response.status}`); const data = await response.json(); document.getElementById("output").textContent = JSON.stringify(data, null, 2); firstLoad = false; } catch (error) { console.error(error); if (firstLoad) { document.getElementById("output").textContent = "Error" + error; } } } setInterval(loadData, refreshInterval); loadData(); const devices = api; </script> </div> </div> </section>

This is my php file:

<?php // read and decode the JSON request body $body = file_get_contents('php://input'); $data = json_decode($body, true); // basic validation – ensure required fields are present $userid = $data['userid'] ?? null; $username = $data['username'] ?? null; $gkdevice = $data['gkdevice'] ?? null; $status = $data['status'] ?? null; $timeRem = $data['TimeRemaining'] ?? null; // Load existing devices if the file exists $devicesFile = "Gkdevices.json"; $devices = file_exists($devicesFile) ? json_decode(file_get_contents($devicesFile), true) : ['JsonDevices' => []]; if (!in_array($data, $devices['JsonDevices'])) { $devices['JsonDevices'][] = $data; sort($devices['JsonDevices']); $numberOfDevices = count($devices['JsonDevices']); file_put_contents("Gkdevices.json", json_encode($devices, JSON_PRETTY_PRINT)); } file_put_contents("activeDownloads.json", json_encode($data, JSON_PRETTY_PRINT)); function formatMilliseconds($TimeRemaining) { $minutes = floor($TimeRemaining / 60000); $hours = floor($minutes / 60); $output = []; if ($hours > 0) $output[] = $hours . ' Std.'; if ($minutes > 0) $output[] = $minutes . ' Min.'; return implode(' ', $output); } $activeFile = 'activeDownloads.json'; $active = file_exists($activeFile) ? json_decode(file_get_contents($activeFile), true) : []; // record or update the entry for this device $active[$userid][$gkdevice] = [ 'username' => $username, 'status' => $status, 'TimeRemaining' => $timeRem, 'lastUpdate' => time(), ]; $response = [ "status" => "ok", "empfangen" => $data ]; echo json_encode($response);