Click here to Skip to main content
15,617,231 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
So i am trying to display all of the data from this json on table form and implement a search bar to work also on site so i can type something and i see order id, customer etc etc of 1 thing. so everything was going well until i saw this object object thing on the products part. i got it to show with json.stringify but it makes it ugly so how would i make it look normal like the other ones and. whats wrong with my search bar

What I have tried:

JavaScript
const orderlist = document.getElementById('orderlist');
const Hakupalkki = document.getElementById('Hakupalkki');
let orderid = [];

Hakupalkki.addEventListener('keyup', (e) => {
    const searchString = e.target.value.toLowerCase();

    const filteredObjects = orderid.filter((orderid) => {
        return (
            orderid.customer.toLowerCase().includes(searchString) ||
            orderid.orderid.toLowerCase().includes(searchString)
        );
    });
});

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);
 }

 for (let i =0; i < data.length; i++) {
    const obj = Object.values(data[i]);
    const rowElement = document.createElement("tr");
    for (const cellText of obj){
        if(typeof(cellText)==='object'){
            const cellElement = document.createElement("td");
            cellElement.textContent = Object.values(JSON.stringify(cellText));
            rowElement.appendChild(cellElement);
        }else{
        const cellElement = document.createElement("td");
        cellElement.textContent = cellText
        rowElement.appendChild(cellElement);
        }
    }
    tableBody.appendChild(rowElement)
 }
}
loadIntoTable("https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py", document.querySelector("table"));


HTML
<!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>

CSS
.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;
}
Posted
Updated 30-Nov-22 0:16am

1 solution

If one of the properties is an object then you need to account for that. I did visit the URL you provided and can see that the "products" property is an array of products, which you won't easily be able to populate into the table directly.

I'd recommend being more explicit when you're building your table. Instead of iterating over each of the properties in the JSON, structure your table so it uses specific properties:

JavaScript
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);

  tableBody.appendChild(tr);
}

If you want to access the products array then you need to do so explicitly:

JavaScript
for (const row of data) {
  for (const product of row.products) {
    // Here add your logic per-product
  }
}
 
Share this answer
 
Comments
Miikarl Miikel 30-Nov-22 5:40am    
So can i alter something to my code to fix it or would it be better to just write it better way entirely
Chris Copeland 30-Nov-22 6:07am    
I think the example I've provided could easily be integrated into the code you've already got. I kept some of the variable names the same, so you can just use my code as a template? The key point was to illustrate that it's better to explicitly reference the JSON properties than dynamically.
Miikarl Miikel 30-Nov-22 6:17am    
Well yea true true, thank for your help !
Miikarl Miikel 30-Nov-22 6:54am    
Yea i implemented this to it and now its more clearer thanks for that! understood it also better. now im just trying to figure out what logic to use per product that part it the tricky one do u have any good reference sites
Chris Copeland 30-Nov-22 8:05am    
I think that comes down to more the use-cases. If the application you're building doesn't need to display or use the product information then there's no point in adding it in 🙂 however if you do want to display the products you'll need to come up with some way of doing it. You should take a look at the requirements for this application and decide the best way to implement it!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900