douwen8118
douwen8118
2016-01-18 09:00

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

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:

enter image description here

RESULT a per suggested by Rajesh:
enter image description here

RESULT as per suggested by BG101:

enter image description here

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • douweng1935 douweng1935 5年前

    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>
    
    点赞 评论 复制链接分享
  • duancan1950 duancan1950 5年前

    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 :).

    点赞 评论 复制链接分享
  • dongtuojuan8998 dongtuojuan8998 5年前

    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>

    </div>
    
    点赞 评论 复制链接分享

相关推荐