CODEWITHSUNDEEP
javascripthtmlarrayshtml-tablejavascript-objects
charles
charles

Reputation: 71

Display array objects as table

I need help in displaying array as a table. I already tried it but if I add the product second time, it replaces all the values of the product that I added in the first time.

What is the proper way to achieve this?

I am adding relevant code below:

 var qtyTotal = 0;
    var priceTotal = 0;
    var products = [];
    var newProduct = {

        product_id : null,
        product_desc : null,
        product_qty : 0,
        product_price : 0.00,
    };


    function addProduct() {
        var productID = document.getElementById("productID").value;
        var product_desc = document.getElementById("product_desc").value;
        var qty = document.getElementById("quantity").value;
        // qtyTotal = qtyTotal + parseInt(qty);
        //document.getElementById("qtyTotals").innerHTML=qtyTotal;
        var price = document.getElementById("price").value;

        newProduct.product_id = productID;
        newProduct.product_desc = product_desc;
        newProduct.product_qty = qty;
        newProduct.product_price = price;

        products.push(newProduct);

        //console.log("New Product " + JSON.stringify(newProduct))
        //console.log("Products " + JSON.stringify(products))

         var html = "<table border='1|1' >";
        for (var i = 0; i < products.length; i++) {
        html+="<tr>";
        html+="<td>"+products[i].product_id+"</td>";
        html+="<td>"+products[i].product_desc+"</td>";
        html+="<td>"+products[i].product_qty+"</td>";
         html+="<td>"+products[i].product_price+"</td>";

        html+="</tr>";

    }
    html+="</table>";
document.getElementById("demo").innerHTML = html;

        document.getElementById("resetbtn").click()            
}
    function deleteProduct(node){    
        r=node.parentNode.parentNode;
        r.parentNode.removeChild(r);
}
<!DOCTYPE html>
<html>
<head>
    <title>Shopping Cart Pure Javascript</title>
</head>
<body>
<form name="order" id="order">
    <table>
        <tr>
            <td>
                <label for="productID">Product ID:</label>
            </td>
            <td>
                <input id="productID" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="product">Product Desc:</label>
            </td>
            <td>
                <input id="product_desc" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="quantity">Quantity:</label>
            </td>
            <td>
                <input id="quantity" name="quantity" width="196px" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="price">Price:</label>
            </td>
            <td>
                <input id="price" name="price" size="28" required/>
            </td>
        </tr>
    </table>
    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >


</form>
<br>

<p id="demo"></p>
</body>
</html>

Upvotes: 1

Views: 1631

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65808

Tables should not be used for layout purposes. They are semantically incorrect for this and they can take longer to layout on the page. CSS should be used for layout.

Additionally, when you have a great deal of elements being created dynamically, it can also be much more efficient (and a great deal easier) to create those DOM elements in memory first, rather than building up huge strings.

You can see in the working code below how much less HTML and JavaScript there is.

You'll probably have to run this snippet "full screen" to see it all.

var qtyTotal = 0;
var priceTotal = 0;
var products = [];

// Global counter to keep id's unique
var counter = 1;

function addProduct() {
  var demo = document.getElementById("demo");
       
  // Get original product section
  var original = document.getElementById("template");
        
  // Copy the original
  var newSection = original.cloneNode(true);
        
  // Update id's so that they are unique
  newSection.querySelector("#productID").id = "product" + counter;
  newSection.querySelector("#product_desc").id = "product_desc" + counter;
  newSection.querySelector("#quantity").id = "quantity" + counter;
  newSection.querySelector("#price").id = "price" + counter;
  
  // Increase counter for next product
  counter++;
        
  // Append the new section to the document
  demo.appendChild(newSection);
        
  // Create a new product with values from the "template" section
  var newProduct = {
    product_id :document.getElementById("productID").value,
    product_desc : document.getElementById("product_desc").value,
    product_qty : document.getElementById("quantity").value,
    product_price : document.getElementById("price").value,
  };
        
  // Add object to array
  products.push(newProduct);
  
  // Test
  console.log(products);
  
  // Reset form
  document.getElementById("resetbtn").click();
}

function deleteProduct(node){    
 r = node.parentNode.parentNode;
 r.parentNode.removeChild(r);
}
* { box-sizing: border-box; }
.row > label { display:inline-block; width:25%; }
.row > input { display:inline-block; width:74%; }

.product { border:2px solid grey; padding:3px; }
<form name="order" id="order">
<div class="product" id="template">
  <div class="row">
     <label for="productID">Product ID:</label>
     <input id="productID" name="product" type="text" size="28" required/>
  </div>
  <div class="row">
     <label for="product">Product Desc:</label>
     <input id="product_desc" name="product" type="text" size="28" required/>
  </div>
  <div class="row">
     <label for="quantity">Quantity:</label>
     <input id="quantity" name="quantity" width="196px" required/>
  </div>
  <div class="row">
     <label for="price">Price:</label>
     <input id="price" name="price" size="28" required/>
  </div>
</div>
<p id="demo"></p>

    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >
    
  
</form>
<br>

Upvotes: 0

Blue
Blue

Reputation: 22911

When adding products (products.push(newProduct)) you're adding a reference to newProduct instead of adding a new object.

Move your newProduct placement into your addProduct function to explicitly create a new object each time.

var qtyTotal = 0;
    var priceTotal = 0;
    var products = [];


    function addProduct() {
        var productID = document.getElementById("productID").value;
        var product_desc = document.getElementById("product_desc").value;
        var qty = document.getElementById("quantity").value;
        // qtyTotal = qtyTotal + parseInt(qty);
        //document.getElementById("qtyTotals").innerHTML=qtyTotal;
        var price = document.getElementById("price").value;

        var newProduct = {

            product_id : null,
            product_desc : null,
            product_qty : 0,
            product_price : 0.00,
        };

        newProduct.product_id = productID;
        newProduct.product_desc = product_desc;
        newProduct.product_qty = qty;
        newProduct.product_price = price;

        products.push(newProduct);

        //console.log("New Product " + JSON.stringify(newProduct))
        //console.log("Products " + JSON.stringify(products))

         var html = "<table border='1|1' >";
        for (var i = 0; i < products.length; i++) {
        html+="<tr>";
        html+="<td>"+products[i].product_id+"</td>";
        html+="<td>"+products[i].product_desc+"</td>";
        html+="<td>"+products[i].product_qty+"</td>";
         html+="<td>"+products[i].product_price+"</td>";

        html+="</tr>";

    }
    html+="</table>";
document.getElementById("demo").innerHTML = html;

        document.getElementById("resetbtn").click()            
}
    function deleteProduct(node){    
        r=node.parentNode.parentNode;
        r.parentNode.removeChild(r);
}
<!DOCTYPE html>
<html>
<head>
    <title>Shopping Cart Pure Javascript</title>
</head>
<body>
<form name="order" id="order">
    <table>
        <tr>
            <td>
                <label for="productID">Product ID:</label>
            </td>
            <td>
                <input id="productID" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="product">Product Desc:</label>
            </td>
            <td>
                <input id="product_desc" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="quantity">Quantity:</label>
            </td>
            <td>
                <input id="quantity" name="quantity" width="196px" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="price">Price:</label>
            </td>
            <td>
                <input id="price" name="price" size="28" required/>
            </td>
        </tr>
    </table>
    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >


</form>
<br>

<p id="demo"></p>
</body>
</html>

Upvotes: 1

Related Questions