Display array objects as table

Question

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>

FYI 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. — Scott Marcus
– Scott Marcus, Commented Jun 28, 2017 at 0:27
@Ank Sorry for the rejection. Just saw he had 2 sentences twice with the same info. Your edit should be approved anyway. — Blue
– Blue, Commented Jun 28, 2017 at 0:31

Blue · Accepted Answer · 2017-06-28 00:22:18Z

1

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>

answered Jun 28, 2017 at 0:22

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

charles Over a year ago

How will I put the label Product ID, Product Description, Quantity and Price in the table?

Blue Over a year ago

@charles: Add another row right at the top before you loop through the products?

charles Over a year ago

How about when i want to add the this <button type="button" onClick="editProduct();"/>Edit</button> on every product beside the price. How should i write this?

Blue Over a year ago

@charles, come on man. This is simple javascript (Google around how to use concatenating): html+="<td><button type="button" onClick="editProduct()" /></td>";. If you're going to ask how do I edit "this" product, and have it update the quantities and stuff, then you're likely over your head, and I would pass this project onto someone else with more javascript skills. You're likely going to need to either use a binding library, or create a dictionary and update the values when a product gets changed.

Scott Marcus · Accepted Answer · 2017-06-28 01:16:58Z

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>

Sir, can you make it into one table only. Thank you so much sir
@charles The point is that there are no tables. Tables should not be used for layout. But, yes, the sections can be placed next to each other by simply moving the output area. I'll update the answer.
sir, its not working. It doesn't output the value in the form.

Collectives™ on Stack Overflow

Display array objects as table

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related