What is going wrong with this javascript

Question

I am trying to post the whole json as a table format but cant find a reason why it just says "object object" etc i tried changing the const data to " const {orderid, customer, customerid } = await response.json
but then it doesnt do anything. like when I open that json file in console the arrays are numbered from 0-75 and there are objects named orderid, customer etc. so what I'm doing from and how do open all of the arrays on the site in table form

async function loadIntoTable(url, table) {
  const tableHead = table.querySelector("thead");
  const tableBody = table.querySelector("tbody")
  const response = await fetch("https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py");
  const data = await response.json();
  console.log(data)
  
  //puhdista
  tableHead.innerHTML = "<tr></tr>";
  tableBody.innerHTML = "";
  
  // lollero
  for (const dataText of data) {
    const dataElement = document.createElement("th");
    dataElement.textContent = dataText;
    tableHead.querySelector("tr").appendChild(dataElement);
  }
}

loadIntoTable("https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py", document.querySelector("table"));

.table {
  box-shadow: 0 0 10px black(0, 0, 0, 0, 1);
  border-collapse: collapse;
  font-family: 'Quicksand', sans-serif;
  overflow: hidden;
  font-weight: bold;
}

.table thead th {
  background: cadetblue
}

.table td,
.table th {
  padding: 10px 20px;
}

.table tbody tr:nth-of-type(even) {
  background: white;
}

.table tbody tr:last-of-type {
  border-bottom: 3px solid green;
}

<table class="table">
  <thead></thead>
  <tbody></tbody>
</table>

Please [edit] your question to show an example of the JSON you get back from that URL. — Heretic Monkey, Nov 29 '22 at 21:16
You can't just dump an object into HTML. You need to individually work with the properties. — isherwood, Nov 29 '22 at 21:18

score 2 · Answer 1 · edited Nov 29 '22 at 21:19

You need to actually choose a property for the title e.g

dataElement.textContent = dataText.customer;

Otherwise you're trying to make the whole object the title.

async function loadIntoTable(url, table) {
  const tableHead = table.querySelector("thead");
  const tableBody = table.querySelector("tbody")
  const response = await fetch(url);
  const data = await response.json();
  // console.log(data)
  
  //puhdista
  tableHead.innerHTML = "<tr></tr>";
  tableBody.innerHTML = "";
  
  // lollero
  for (const dataText of data) {
    const dataElement = document.createElement("th");
    dataElement.textContent = dataText.customer;
    tableHead.querySelector("tr").appendChild(dataElement);
  }
}

loadIntoTable("https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py", document.querySelector("table"));

.table {
  box-shadow: 0 0 10px black(0, 0, 0, 0, 1);
  border-collapse: collapse;
  font-family: 'Quicksand', sans-serif;
  overflow: hidden;
  font-weight: bold;
}

.table thead th {
  background: cadetblue
}

.table td,
.table th {
  padding: 10px 20px;
}

.table tbody tr:nth-of-type(even) {
  background: white;
}

.table tbody tr:last-of-type {
  border-bottom: 3px solid green;
}

<table class="table">
  <thead></thead>
  <tbody></tbody>
</table>

Okey, can u call and whole array to table form ? or do i need to do object only — Jesse, Nov 29 '22 at 21:29

What is going wrong with this javascript

1 Answers1