【解決方法】これを機能させるにはどうすればよいですか

[ad_1]

したがって、このjsonのすべてのデータをテーブル形式で表示し、検索バーを実装してサイトでも機能するようにしようとしているので、何かを入力すると、注文ID、顧客など1つのものが表示されます。製品部分でこのオブジェクトオブジェクトを見るまで、すべてが順調に進んでいました。 json.stringifyで表示するようにしましたが、見苦しくなりますので、他のものと同じように正常に見えるようにするにはどうすればよいですか。私の検索バーの何が問題なのですか

私が試したこと：

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

解決策 1

プロパティの 1 つがオブジェクトである場合は、それを考慮する必要があります。ご提供いただいた URL にアクセスしましたが、 "products" プロパティは製品の配列であり、テーブルに直接入力するのは簡単ではありません。

テーブルを作成するときは、より明確にすることをお勧めします。 JSON の各プロパティを反復処理する代わりに、特定のプロパティを使用するようにテーブルを構成します。

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

products 配列にアクセスする場合は、明示的にアクセスする必要があります。

JavaScript

for (const row of data) {
  for (const product of row.products) {
    // Here add your logic per-product
  }
}

[ad_2]