如何将逗号分隔值分解为<tr>

Question

JSON

{
  "catalog_name": ["Sistem Autodownline ", "Karipap Pusing Ayu"],
  "price": ["100", "8"],
  "qty": "",
  "qty2": ["", ""],
  "total_qty": "",
  "total": "",
  "mem": "10",
  "email_2": "",
  "ic_add": "890527-08-6136",
  "comm": "20",
  "grand": "",
  "cash": "120",
  "change": "120.00",
  "cust_id": "TGF 566",
  "cust_name": "coco crancy",
  "mem_id": "123",
  "mem_name": "QIZLAF MARKETING",
  "action": "test"
}

The above json is passed as jQuery Object via ajax to a page. And I use foreach loop to display values that has no array. For those with array values,I use $.each loop like below:

var _tableHTMl = "<table><thead><tr>"+
    "<th>Item Name</th>"+
    "<th>Unit Price RM</th>"+
    "<th>Qty</th>"+
    "<th>Amount</th></thead><tbody>";

$("#print_receipt").append(_tableHTML);


var new_array = {};

for (var i = 0; i < data.length; i++) {

  new_array[i] = {
    'catalog_name': data[i].catalog_name,
    'price': data[i].price,
    'qty': data[i].qty,
    'amt': data[i].grand
  };

}
//this simply displays all values within one `<tr>` with comma separated

$.each(new_array, function(index, value) {
  $("#print_receipt").append(
    "<table><tr><td>" +
    value.catalog_name +
    "</td><td>" +
    value.price +
    "</td><td>" +
    value.qty +
    "</td><td>" +
    value.amt +
    "</td></tr></tbody></table>"
  );
});

The output:

RESULT a per suggested by Rajesh:

RESULT as per suggested by BG101:

Answer 1

I ve applied a split function to your data source , then i just given the json object to a datatable ( you can still use the append method ) .

$(document).ready(function() {

  var json = '[{"catalog_name": ["Sistem Autodownline ", "Karipap Pusing Ayu"],"price": ["100", "8"],"qty": "","qty2": ["", ""],"total_qty": "","total": "","mem": "10","email_2": "","ic_add": "890527-08-6136","comm": "20","grand": "","cash": "120","change": "120.00","cust_id": "TGF 566","cust_name": "coco crancy","mem_id": "123","mem_name": "QIZLAF MARKETING","action": "test"}]';
  
  var data = JSON.parse(json);
  
  $.each(data,function(i,v){
    if($.isArray(v.catalog_name)){
      var newone = $.map(v.catalog_name,function(elem,j){
        return {catalog_name: elem, price: v.price[j], qty: v.qty, grand: v.grand }
      });
      Array.prototype.splice.apply(data,[i, newone.length].concat(newone));
    }
  });

  $('#table').DataTable({
    data: data,
    columns: [{
      data: "catalog_name"
    }, {
      data: "price"
    }, {
      data: "qty"
    }, {
      data: "grand"
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>


<table id="table">
  <thead>
    <tr>
      <th>Item Name</th>
      <th>Unit Price RM</th>
      <th>Qty</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

</div>