Whats going wrong with this script-CodePudding

I want to make a search button that when I type order ID it will post the results in table form from a JSON file. However, I can't seem to make it to work.

I don't really understand how to put it to the code or what's the right words to search from google to help my case

async function loadintotable(url, table) {
  const tableHead = table.querySelector("thead");
  const tableBody = table.querySelector("tbody");
  const response = await fetch(url);
  const {
    orderid
  } = await response.json();

  //puhdista pöytä
  tableHead.innerHTML = "<tr></tr>";
  tableBody.innerHTML = "";
  //headers 
  for (const headerText of orderid) {
    const orderid = document.createElement("th");
    headerElement.textContent = headerText;
    tableHead.querySelector("tr").appendChild(headerElement);
  }
}
loadintotable("https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py", document.querySelector("table"));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome Page</title>
</head>
<body>
    <style>
        body {
        background-image: url(file:///C:/Users/jegul/Downloads/logistic-workers-carrying-boxes-with-loaders/6541.jpg);
        background-position: center center;
          background-size: auto;
            background-repeat: no-repeat;
      }
      </style>
    
    <button 
    position="top right"
    type="button5">
Käyttäjä
<link rel="stylesheet" href="tää.css">
</button
    <br>
    <h1>Varasto sivut</h1>
    <meta charset='UTF-8'>
    <title>Haku</title>
    <link rel="stylesheet" href="tyylit.css">
    
  </head>
  <body>
    <form role="search" id="form">
      <input type="search" id="query" name="q" placeholder="Hae tilausnumerolla..." aria-label="Hae Tilaus">
      <button type="button" onclick="tilaukset()" ></button>
        <table >
          <thead></thead>
          <tbody></tbody>
        </table>
    </form>
<script src="tilaukset.js"></script>
    <style>
        div {
          background-color: lightgrey;
          width: 850px;
          border: 5px solid rgb(33, 29, 243);
          padding: 5px;
          margin: 20px;
        }
        </style>
    <style>
      table, th, td {
        border:1px solid rgb(86, 18, 245);
        background-color: lightgrey;
        padding: 5px;
        margin: 5px;
      }
      </style>

</body>
</html>

CodePudding user response：

First of all you need to attach the search button to the function that updates the table everytime you click. The json file that is being fetched in that function needs to be converted to a usable form using: json.parse().The information now becomes an object. use it to populate the table by creating html formats as strings and then append it to the table. Hope this helps