How do i acces the array from json that looks to be inside of other array

December 1, 2022

I cant find a solution i am trying to access "products" array to display orders i have tried mapping i have tried parsing i have tried alot of different things, i need to acces it so i can display its objects but that seems to be impossible to me at the moment. i tried map and showed 1 value on console but it just say undefined. so how would someone access it? enter image description here thats the thing im trying to access

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 headerText in data[0]) {
    const HeaderElement = document.createElement("th");
    HeaderElement.textContent = headerText
    tableHead.querySelector("tr").appendChild(HeaderElement);
 }
 function createCell(tr, value) {
    const cell = document.createElement('td');
    cell.textContent = value;
    tr.appendChild(cell);
  }
  
  for (const row of data) {
    const tr = document.createElement('tr');

    createCell(tr, row.orderid);
    createCell(tr, row.customerid);
    createCell(tr, row.customer)
    createCell(tr, row.invaddr)
    createCell(tr, row.delivaddr)
    createCell(tr, row.deliverydate)
    createCell(tr, row.respsalesperson)
    createCell(tr, row.comment)
    createCell(tr, row.totalprice)
    for(const product of data){
    
    for (const headerText in product[0]){
        console.log(data[0][7]);
        const HeaderElement = document.createElement("th");
        HeaderElement.textContent = headerText
        tableHead.querySelector("tr").appendChild(HeaderElement);
    }
    for (const product of row.products) {
           //good logic per-product??
           for (const headerText in product) {
         }
        }
    }
    tableBody.appendChild(tr);
  }
}
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;
    outline: black;
}
.table thead th {
    background:cadetblue;
    outline:black
    
}
.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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="maini.css">
</head>
<body>
    <div class="container">
        <h1>tilaukset</h1>
        <div id="search">
            <input 
              type="text"
              name="Hakupalkki"
              id="Hakupalkki"
              placeholder="Hae tilausta"
            />
        </div>
    <table class ="table">
        <thead></thead>
        <tbody></tbody>
    </table>
    <script src="skripti.js"></script>
</body>
</html>

>Solution :

I have accessed the products like this:

So here in this solution, I have created another table for products and appended it in the products cell of the order table.

Since you have multiple products inside one order so when displaying them in the table there can be 2 solution that i can think of:

Append the product properties as header in the order table and repeat the order information in each product rows.
Display the order info on a single row and create another table for products that we append on the orders table product cell

I have the 2nd solution here:

NOTE: Run the snipped and view in full page for better view:

function createCell(tr, value) {
  const cell = document.createElement('td');
  cell.textContent = value;
  tr.appendChild(cell);
}

function createTable(element) {
  const table = document.createElement('table');
  const tableHead = document.createElement('thead');
  const tablebody = document.createElement('tbody');
  table.appendChild(tableHead);
  table.appendChild(tablebody);
  element.appendChild(table);
  return element;
}

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();
  //puhdista
  tableHead.innerHTML = "<tr></tr>";
  tableBody.innerHTML = "";
  // lollero
  for (const headerText in data[0]) {
      const HeaderElement = document.createElement("th");
      HeaderElement.textContent = headerText
      tableHead.querySelector("tr").appendChild(HeaderElement);
  } 
  for (const row of data) {
    const tr = document.createElement('tr');

    createCell(tr, row.orderid);
    createCell(tr, row.customerid);
    createCell(tr, row.customer)
    createCell(tr, row.invaddr)
    createCell(tr, row.delivaddr)
    createCell(tr, row.deliverydate)
    createCell(tr, row.respsalesperson)
    createCell(tr, row.comment)
    createCell(tr, row.totalprice)
    
    const productsTable = createTable(tr);
    const productsTableHead = productsTable.querySelector("thead");
    const productsTableBody = productsTable.querySelector("tbody");
    productsTableHead.innerHTML = "<tr></tr>";
    productsTableBody.innerHTML = "";
    const products = row.products;
    for (const headerText in products[0]){
        const HeaderElement = document.createElement("th");
        HeaderElement.textContent = headerText
        productsTableHead.querySelector("tr").appendChild(HeaderElement);
    }
    for (const product of products) {
      const productTr = document.createElement('tr');
      createCell(productTr, product.code);
      createCell(productTr, product.product);
      createCell(productTr, product.description)
      createCell(productTr, product.suppliercode)
      createCell(productTr, product.qty)
      createCell(productTr, product.unit_price)
      createCell(productTr, product.shelf_pos)
      productsTableBody.appendChild(productTr)
    }
    tableBody.appendChild(tr);
  }
}
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;
    outline: black;
}
.table thead th {
    background:cadetblue;
    outline:black
    
}
.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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="maini.css">
</head>
<body>
    <div class="container">
        <h1>tilaukset</h1>
        <div id="search">
            <input 
              type="text"
              name="Hakupalkki"
              id="Hakupalkki"
              placeholder="Hae tilausta"
            />
        </div>
    <table class ="table">
        <thead></thead>
        <tbody></tbody>
    </table>
    <script src="skripti.js"></script>
</body>
</html>