CODEWITHSUNDEEP
jqueryhtml
Mohd Shafiq
Mohd Shafiq

Reputation: 27

jQuery table issue when looping

I want to create one table but there is two loop since there are two array that are need to be include in the table.

Here is the two array (from console view):

Object { quota: (5) […], productName: (5) […] }

In quota there is numbers related to each of the productName.

Here is the code part for that table.

jQuery.ajax({
    type: "POST",
    url: "http://ayambrand-com-my-v1.cloudaccess.host/index.php?option=com_echarity&format=raw&task=api.get_product_name",
    data: {dataArrayPost : Data},
    success: function(data){
        var a = JSON.parse(data);
        console.log(a);
        var prodName = a.productName; 
        var splitProductName = "";
        var prodQty = a.quota; 
        var splitProductQuota = "";
        var contents = '<table id="tableDonateDisplay" class="table table-hover">';
        contents += "<tr>";
        contents += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
        jQuery.each(prodName, function(index, value) {
            splitProductName = value;
            contents += "<tr>";
            contents += '<td>' + splitProductName;
        });
        jQuery.each(prodQty, function(index, value) {
            splitProductQuota = value;
            contents += '</td><td>' + splitProductQuota + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>';
            contents += "</tr>";
        });
        contents += "</tr></table>";
        jQuery('#contentNeed').append(contents);
    }
});

The table has become like this. How can I make that quota beside on the product name?

JSON Data:

enter image description here

Upvotes: 0

Views: 54

Answers (1)

Sachi Tekina
Sachi Tekina

Reputation: 1810

First, you need to close the tr tag of the th, then check the index of both iteration:

var a = {
  productName: ["a", "b", "c", "d"],
  quota: [1, 5, 10, 20]
};
console.log(a);
var prodName = a.productName;
var splitProductName = "";
var prodQty = a.quota;
var splitProductQuota = "";
var contents = '<table id="tableDonateDisplay" class="table table-hover" border="1">';
contents += "<tr>";
contents += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
contents += "</tr>";

jQuery.each(prodName, function(index1, value1) {
  splitProductName = value1;
  contents += "<tr>";
  contents += '<td>' + splitProductName;
  jQuery.each(prodQty, function(index, value) {
    if (index1 == index) {
      splitProductQuota = value;
      contents += '</td><td>' + splitProductQuota + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>';
      contents += "</tr>";
    }

  });
});

contents += "</tr></table>";
jQuery('#contentNeed').append(contents);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentNeed">

</div>

I created a mock JSON object.

Upvotes: 2

Related Questions