如何将逗号分隔的值分解为<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> 

Answer 2

This is causing issues,

$.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>"
  );
});

If you notice, you are adding table inside table . Update it to this:

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

Edit 1

As pointed out by @BG101, print_receipt is a container and not a table . So either you can add ID while creating table, or you can add table in querySelector like $("#print_receipt table") .

Also following is a working sample code:

 var data = [{ "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 _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.push({ 'catalog_name': data[i].catalog_name, 'price': data[i].price, 'qty': data[i].qty, 'amt': data[i].grand }); } $.each(new_array, function(index, value) { $("#print_receipt table").append( "<tr><td>" + value.catalog_name + "</td><td>" + value.price + "</td><td>" + value.qty + "</td><td>" + value.amt + "</td></tr>" ); }); 

 td{ border:1px solid gray; padding:2px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="print_receipt" ></div> 

Answer 3

You shouldn't create another <table> tag but extend the <tbody>

$("#print_receipt").append(
"<table><tr><td>" +
value.catalog_name +

this will break the connection within the layout
it should be more like this:

$("#print_receipt").append(
"<tr><td>" +

... an don't forget the closing tags
for the multiple values (arrays) you could use array.join('<concatenation character[s]') which will transform them to a string.

or if you need to do special transformation where you want for example a list within a <td> you can use

"<ul>" + array.map(function(item){ return "<li>" + item + "<li>"; }) + "</ul>" or something like that

but the layout breaks because you're not extending the table with the <th> you're breaking it :).