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"
}

以上json通过jQuery Object通过ajax传递到页面。我使用foreach loop来显示没有数组的值。对于那些具有数组值的人，我使用$.each loop，如下所示：

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

输出：

根据Rajesh的建议结果：

根据BG101建议的结果：

Answer 1

我已将split函数应用于数据源，然后我将json对象赋予数据表（您仍然可以使用append方法）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这会导致问题，

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

如果您注意到，则在table内添加table。将其更新为：

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

编辑1

正如@ BG101所指出的那样，print_receipt是一个容器，而不是table。因此，您可以在创建表格时添加ID，也可以在querySelector中添加$("#print_receipt table")表格。

以下是一个工作示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您不应该创建另一个<table>代码，而是扩展<tbody>

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

这将破坏布局中的连接
它应该更像这样：

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

...不要忘记关闭标签
对于多个值（数组），您可以使用array.join('<concatenation character[s]')将它们转换为字符串。

或者如果您需要进行特殊转换，例如<td>中的列表，您可以使用

"<ul>" + array.map(function(item){ return "<li>" + item + "<li>"; }) + "</ul>"或类似的东西

但布局中断了，因为您没有使用<th>来扩展表格，而是打破了它。）。

如何将逗号分隔值分解为

JSON

3 个答案:

编辑1