Generate table with array-CodePudding

I am creating a website that generates a dynamic table on load from an array. The array is

let products = 
[
   ["product1", "Small Widget", "159753", 33, 22],
   ["product2", "Medium Widget", "258456", 55, 44],
   ["product3", "Large Widget", "753951", 77, 88],
   ["product4", "Not a Widget", "852654", 11, 2],
   ["product5", "Could be a Widget", "654456", 99, 6],
   ["product6", "Ultimate Widget", "321456", 111, 66],
   ["product7", "Jumbo Small Medium Widget", "987456", 88, 11]
   
]

The array goes: Product Name, Product Description, Product ID, Price and Inventory Amount. I need to make the table output these fields into the order of Name, ID, Description, Price and Inventory Amount, then I need to make the price field have a $ in front of the price and check the inventory amount if it is less than 20. If the inventory is less than 20 I need to change the background color of the cell. Can someone help me figure out how exactly I need to go about doing this? Here is my js file currently which only generates the table but none of the formatting I need.

let products = 
[
   ["product1", "Small Widget", "159753", 33, 22],
   ["product2", "Medium Widget", "258456", 55, 44],
   ["product3", "Large Widget", "753951", 77, 88],
   ["product4", "Not a Widget", "852654", 11, 2],
   ["product5", "Could be a Widget", "654456", 99, 6],
   ["product6", "Ultimate Widget", "321456", 111, 66],
   ["product7", "Jumbo Small Medium Widget", "987456", 88, 11]
   
]

//first create the table
function generateTableHead(table, data) {
    let thead = table.createTHead();
    let row = thead.insertRow();
    for (let key of data) {
        let th = document.createElement("th");
        let text = document.createTextNode();
        th.appendChild(text);
        row.appendChild(th);
    }
}

function generateTable(table, data) {
    for (let element of data) {
        let row = table.insertRow();
        for (key in element) {
            let cell = row.insertCell();
            let text = document.createTextNode(element[key]);
            cell.appendChild(text);
        }
    }
}
let table = document.querySelector("table");
let data = Object.keys(products[0]);
generateTable(table, products);
generateTableHead(table, data);

<!DOCTYPE html>
<html lang="en">
<head>
<title>The Sunglass Emporium </title>
   <meta charset="utf-8" />

    <link href="styles/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles/reset.css" rel="stylesheet" type="text/css" />
    
    <link rel="icon" href="images/iconPic.png">
    
</head>

    <header>
    <a href="index.html"><img class="topImg" src="images/headerPic.png" alt="MUSC"/></a>
    <a href="index.html"><img class="topImg2" src="images/headerPic2.png" alt="MUSC"/></a>
    </header>
    <h1 class="titleH1"> The Sunglass Emporium </h1>
    <nav>
        <ul class="topnav1">
        <li><a class="topnav2" href="productList.html" >Product List</a></li>
        <li><a class="topnav2" href="productInfo.html" >Product Info</a></li>
        <li><a class="topnav2" href="productOrder.html" >Product Order</a></li>
        </ul>
    </nav>



<body>
    <table id="test">
    </table>
</body>



<footer>

</footer>

</html>

Can someone please help point me in the right direction? I have no idea what to change to make the table work correctly. I want to strictly use regular javascript.

CodePudding user response：

Please find the correction that I added

Your table header is not bounded correctly. I created a dummy array with your required header labels and passed to your generateTableHead function
Inside your generateTable function, there should be some logic to differentiate "Price" and "Inventory Amount" data. I did it using the index of the array. Index 3 belongs to Price and 4 belongs to Inventory Amount.
So if the index is 3, append $ symbol, and if index is 4 add a background color to cell based on the value.

Working Fiddle

let products = [
    ["product1", "Small Widget", "159753", 33, 22],
    ["product2", "Medium Widget", "258456", 55, 44],
    ["product3", "Large Widget", "753951", 77, 88],
    ["product4", "Not a Widget", "852654", 11, 2],
    ["product5", "Could be a Widget", "654456", 99, 6],
    ["product6", "Ultimate Widget", "321456", 111, 66],
    ["product7", "Jumbo Small Medium Widget", "987456", 88, 11]
];

//first create the table
function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}

function generateTable(table, data) {
  for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      const textContent = key === '3' ? '$'   element[key] : element[key];
      let text = document.createTextNode(textContent);
      cell.appendChild(text);
      if (key === "4" && element[key] < 20) {
        cell.style.background = "grey";
      }
    }
  }
}
let table = document.querySelector("table");
const header = [ "Product Name", "Product Description", "Product ID", "Price", "Inventory Amount"];
generateTable(table, products);
generateTableHead(table, header);

<table id="test">
</table>

CodePudding user response：

You have to update the Table generator function as below

function generateTable(table, data) {
    for (let element of data) {
        let row = table.insertRow();
        var cnt = 0;
        for (key in element) {
            let cell = row.insertCell();
            let text = document.createTextNode(element[key]);
            if(cnt == 3)
                text = document.createTextNode("$ " element[key]);
            if(cnt == 4){
                if(element[key]<20)
                    cell.style.backgroundColor = "#ff0000";
            }
            cell.appendChild(text);
            cnt  ;
        }
    }
}

CodePudding user response：

Example with a normal product structure and the correct order

        const header = ['name', 'id', 'description', 'price', 'amount'];
        const products = [
            { name: "product1", id: "1", description: "Small Widget 1", price: 33, amount: 10 },
            { name: "product2", id: "2", description: "Small Widget 2", price: 33, amount: 15 },
            { name: "product3", id: "3", description: "Small Widget 3", price: 33, amount: 22 },
            { name: "product5", id: "4", description: "Small Widget 4", price: 33, amount: 32 }
        ]

        function generateTableHead(table, data) {
            let thead = table.createTHead();
            let row = thead.insertRow();
            for (const key of data) {
                let th = document.createElement("th");
                let text = document.createTextNode(key);
                th.appendChild(text);
                row.appendChild(th);
            }
        }

        function generateTable(table, data) {
            for (const element of data) {
                let row = table.insertRow();
                for (key in element) {
                    let cell = row.insertCell();
                    let text = document.createTextNode(element[key]);
                    key === 'price' && (text = document.createTextNode("$ "   element[key]));
                    key === 'amount' && element[key] < 20 && (cell.style.backgroundColor = "#ff0000");
                    cell.appendChild(text);
                }
            }
        }
        const table = document.querySelector("table");

        generateTable(table, products);
        generateTableHead(table, header);

table,th,td {
            border: 1px solid black;
 }

<table id="test"></table>