2

I want to create an HTML table using json data. The json data will change over time. When convert this json data to HTML table, the table look like this with consistent. It means the alignment of money values and the width of the table. How can I convert the json data into HTML table?

<html>
   <head>
      <title>Hello</title>
      <style>
         table{
         font-family: 'Courier New', Courier, monospace;
         }
         td#aliCenter{
         text-align:center;
         }
         td#aliRight{
         text-align:right;
         }
         td#myId{
         text-align:center;
         font-size: 13px;
         }

      </style>
   </head>
   <body>
      <table width="302.362205"> <!-- To print paper size is 80 cm (=302.362205 pixel) -->
         <!-- header -->
         <tr>
            <td colspan="5" id="aliCenter">Moring Cafe<br>Main Road, Kandawala<br>Contact : 111-555-878</td>
         </tr>
         <tr>
            <td colspan="5" id="myId">15/11/2018 16:14:52&nbsp;&nbsp;SAKTHY&nbsp;&nbsp;No: 24</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td id="aliCenter">NO</td>
            <td id="aliCenter">ITEM</td>
            <td id="aliCenter">QTY</td>
            <td id="aliCenter">PRICE</td>
            <td id="aliCenter">AMOUNT</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <!-- buying items -->
         <tr>
            <td>1</td>
            <td colspan="4">Pizza</td>
         </tr>
         <tr>
            <td></td>
            <td>PZ4545</td>
            <td>2.00</td>
            <td id="aliRight">150.00</td>
            <td id="aliRight">300.00</td>
         </tr>
         <tr>
            <td>2</td>
            <td colspan="4">Buggers</td>
         </tr>
         <tr>
            <td></td>
            <td>BR7878</td>
            <td>5.00</td>
            <td id="aliRight">500.00</td>
            <td id="aliRight">2500.00</td>
         </tr>
         <tr>
            <td>3</td>
            <td colspan="4">Cock</td>
         </tr>
         <tr>
            <td></td>
            <td>CC6523</td>
            <td>3.00</td>
            <td id="aliRight">180.00</td>
            <td id="aliRight">540.00</td>
         </tr>
         <!-- footer -->
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td></td>
            <td colspan="3">Net Total</td>
            <td id="aliRight">3340.00</td>
         </tr>
         <tr></tr>
         <tr>
            <td></td>
            <td colspan="3">Cash</td>
            <td id="aliRight">3500.00</td>
         </tr>
         <tr>
            <td></td>
            <td colspan="3">Balance</td>
            <td id="aliRight">160.00</td>
         </tr>
         <tr></tr>
         <tr>
            <td colspan="5" id="aliCenter">-----------IMPORTANT NOTICE-----------</td>
         </tr>
         <tr>
            <td colspan="5" id="aliCenter">In case of a price discrepancy, <br>return the bill and item within <br> 2 days to refund the difference</td>
         </tr>
      </table>
   </body>
</html>

The json data contains main three parts. Such as header, items and footer. The header and footer is fixed, but the items's length will change over customers. The items should be circulate with the above table format, without changing the consistence.

{
    "header": {
        "invoice": "24",
        "name": "Morning Cafe",
        "address": "Main Road, Kandawala",
        "contact": "111-555-878",
        "date": "15/11/2018 16:14:52",
        "counter": "SAKTHY"
    },
    "items": [{
        "no": "1",
        "item": "Pizza",
        "code":"PZ4545",
        "price": "150.00",
        "qty":"2.00",
        "amount":"300.00"
    },
    {
        "no": "2",
        "item": "Burger",
        "code":"BR7878",
        "price": "500.00",
        "qty":"5.00",
        "amount":"2500.00"
    },
    {
        "no": "3",
        "item": "Cock",
        "code":"CC6523",
        "price": "180.00",
        "qty":"3.00",
        "amount":"540.00"
    }],
    "footer": {
        "total":"3340.00",
        "cash":"3500.00",
        "balance":"160.00",
        "notice": "In case of a price discrepancy, return the bill and item within 2 days to refund the difference."
    },
}
Improve this question
2
  • What is your question? Commented Nov 15, 2018 at 14:58
  • @jmargolisvt, see the updated Commented Nov 15, 2018 at 15:07

2 Answers 2

Reset to default
3

This is a plain JS solution. The JSON is parsed as a JSON object. I edited your HTML and added some new elements with an ID to select them from within JavaScript.

I edited my answer. NEVER use id multiple times. I changed it to a CSS class. Align should be correct now.

EDIT: Here is a single file solution: https://jsfiddle.net/e3xm1r05/2/

var data = JSON.parse(`{
    "header": {
        "invoice": "59",
        "name": "Morning Cafe",
        "address": "Main Road, Kandawala",
        "contact": "111-555-978",
        "date": "12/11/2018 01:28:52",
        "counter": "SAKTHY"
    },
    "items": [{
        "no": "1",
        "item": "Pizza",
        "code":"PZ4566",
        "price": "500.00",
        "qty":"2",
        "amount":"1000.00"
    },
    {
        "no": "2",
        "item": "Burger",
        "code":"BR4587",
        "price": "250.00",
        "qty":"2",
        "amount":"500.00"
    },
    {
        "no": "3",
        "item": "Sample",
        "code":"SE2569",
        "price": "50.00",
        "qty":"5",
        "amount":"250.00"
    }],
    "footer": {
        "total":"1750.00",
        "cash":"2000.00",
        "balance":"250.00",
        "notice": "In case of a price discrepancy, return the bill and item within 2 days to refund the difference."
    }
    }`);

document.getElementById('invoice-name').innerHTML  = data.header.name;
document.getElementById('invoice-address').innerHTML  = data.header.address;
document.getElementById('invoice-contact').innerHTML  = data.header.contact;
document.getElementById('invoice-date').innerHTML  = data.header.date;
document.getElementById('invoice-counter').innerHTML  = data.header.counter;
document.getElementById('invoice-no').innerHTML  = data.header.invoice;

var insertAtRow=5;
var table = document.getElementById("invoice-table");
for(var i = data.items.length-1; i >=0 ;i--)
{
	var item = data.items[i];
  var rowHead = table.insertRow(insertAtRow);
	var rowItem = table.insertRow(insertAtRow+1);
	
  rowHead.insertCell(0).innerHTML = item.no;
  rowHead.insertCell(1).innerHTML = item.item;
  
  rowItem.insertCell(0).innerHTML = "";
	rowItem.insertCell(1).innerHTML = item.code;
	rowItem.insertCell(2).innerHTML = item.qty;
  
  var priceCell = rowItem.insertCell(3);
  var amountCell = rowItem.insertCell(4);
  priceCell.innerHTML = item.price;
  amountCell.innerHTML = item.amount;
  priceCell.classList.add('aliRight');
  amountCell.classList.add('aliRight');
}

document.getElementById('footer-net-total').innerHTML  = data.footer.total;
document.getElementById('footer-cash').innerHTML  = data.footer.cash;
document.getElementById('footer-balance').innerHTML  = data.footer.balance;
document.getElementById('footer-notice').innerHTML  = data.footer.notice;
<html>
   <head>
      <title>Hello</title>
      <style>
         table{
         font-family: 'Courier New', Courier, monospace;
         }
         .aliCenter{
         text-align:center;
         }
         .aliRight{
         text-align:right;
         }
         td#myId{
         text-align:center;
         font-size: 13px;
         }
      </style>
   </head>
   <body>
      <table id="invoice-table" width="302.362205"> <!-- To print paper size is 80 cm (=302.362205 pixel) -->
         <!-- header -->
         <tr>
            <td colspan="5" class="aliCenter">
              <div id="invoice-name"></div>
              <div id="invoice-address"></div>
              <div id="invoice-contact"></div>
            </td>
         </tr>
         <tr>
            <td colspan="5" id="myId"><span id="invoice-date"></span>&nbsp;&nbsp;<span id="invoice-counter"></span>&nbsp;&nbsp;No: <span id="invoice-no"></span></td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td class="aliCenter">NO</td>
            <td class="aliCenter">ITEM</td>
            <td class="aliCenter">QTY</td>
            <td class="aliCenter">PRICE</td>
            <td class="aliCenter">AMOUNT</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <!-- buying items -->
         <!--Script will insert after 6th row!!!-->
         <!-- footer -->
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td></td>
            <td colspan="3">Net Total</td>
            <td class="aliRight"><span id="footer-net-total"></span></td>
         </tr>
         <tr></tr>
         <tr>
            <td></td>
            <td colspan="3">Cash</td>
            <td class="aliRight"><span id="footer-cash"></span></td>
         </tr>
         <tr>
            <td></td>
            <td colspan="3">Balance</td>
            <td class="aliRight"><span id="footer-balance"></span></td>
         </tr>
         <tr></tr>
         <tr>
            <td colspan="5" class="aliCenter">-------IMPORTANT NOTICE-----------</td>
         </tr>
         <tr>
            <td colspan="5" class="aliCenter"><span id="footer-notice"></td>
         </tr>
      </table>
   </body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Sorry!, Did you changed the code on my post? Because I did not see, at that time I also edited.
Why the <hr> lies two times before starting items, but not before the Net Total ?
Sorry, I started inserting the items one row too late. Should be fixed now. Can't test it myself, am on my mobile right now
Nicely working, Can I use this to print receipt with EPSON TM-T82 Receipt
Since this is a POS printer => it needs raw data (Characters only), so this is not possible. Maybe check out this question
|
0

Your HTML file should look something like this:

<!DOCTYPE html>
<html>
   <head>
      <title>Hello</title>
      <style>
         table{
         font-family: 'Courier New', Courier, monospace;
         }
         td#aliCenter{
         text-align:center;
         }
         td#aliRight{
         text-align:right;
         }
         td#myId{
         text-align:center;
         font-size: 13px;
         }

      </style>
   </head>
   <body>
      <table width="302.362205" id="your_table_id"> <!-- To print paper size is 80 cm (=302.362205 pixel) -->
         <!-- header -->
         <tr>
            <td colspan="5" id="aliCenter">Moring Cafe<br>Main Road, Kandawala<br>Contact : 111-555-878</td>
         </tr>
         <tr>
            <td colspan="5" id="myId">15/11/2018 16:14:52&nbsp;&nbsp;SAKTHY&nbsp;&nbsp;No: 24</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td id="aliCenter">NO</td>
            <td id="aliCenter">ITEM</td>
            <td id="aliCenter">QTY</td>
            <td id="aliCenter">PRICE</td>
            <td id="aliCenter">AMOUNT</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <!-- buying items -->

         <script>
        var json_data = JSON.parse('{
    "header": {
        "invoice": "59",
        "name": "Morning Cafe",
        "address": "Main Road, Kandawala",
        "contact": "111-555-978",
        "date": "12/11/2018 01:28:52",
        "counter": "SAKTHY"
    },
    "items": [{
        "no": "1",
        "item": "Pizza",
        "code":"PZ4566",
        "price": "500.00",
        "qty":"2",
        "amount":"1000.00"
    },
    {
        "no": "2",
        "item": "Burger",
        "code":"BR4587",
        "price": "250.00",
        "qty":"2",
        "amount":"500.00"
    },
    {
        "no": "3",
        "item": "Sample",
        "code":"SE2569",
        "price": "50.00",
        "qty":"5",
        "amount":"250.00"
    }],
    "footer": {
        "total":"1750.00",
        "cash":"2000.00",
        "balance":"250.00",
        "notice": "In case of a price discrepancy, return the bill and item within 2 days to refund the difference."
    },
}');

//Items - You can simply hard code the header into your HTML
for (var i = 0;i<json_data["items"].length;i++){

    document.getElementById("your_table_id").innerHTML+="<tr><td>" + json_data["items"][i]["no"] + 
    "</td><td colspan='4'>" + json_data["items"][i]["item"] + 
    "</td></tr><tr><td></td><td>" + json_data["items"][i]["code"] + 
    "</td><td>" + json_data["items"][i]["price"] + 
    "</td><td>" + json_data["items"][i]["qty"] + 
    "</td><td>" + json_data["items"][i]["amount"] + 
    "</td></tr>" ;
}

//Then write some code to generate the footer.
document.getElementById("your_table_id").innerHTML+="<tr><td colspan='5'><hr></td></tr><tr><td></td><td colspan='3'>Net Total</td><td id='aliRight'>" + json_data["footer"]["total"] + "</td></tr><tr></tr><tr><td></td><td colspan='3'>Cash</td><td id='aliRight'>" + json_data["footer"]["cash"] + "</td></tr><tr><td></td><td colspan='3'>Balance</td><td id='aliRight'>" + json_data["footer"]["balance"] + "</td></tr><tr></tr><tr><td colspan='5' id='aliCenter'>-----------IMPORTANT NOTICE-----------</td></tr><tr><td colspan='5' id='aliCenter'>" + json_data["footer"]["notice"] + "</td></tr>";
     </script>
      </table>
   </body>
</html>
Improve this answer

12 Comments

Last two <td>s ? It means qty and amount ?
Please see my update json data according to the html content
How to add header and footer, It would appreciated
Alright I updated my answer. Just keep the header HTML you already have, but make sure to give your table an ID
Thank yo so much.
|