Making a dynamic HTML table using json

Question

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?


   
      Hello
      
   
   
       
         
         
            Moring Cafe
Main Road, Kandawala
Contact : 111-555-878
         
         
            15/11/2018 16:14:52  SAKTHY  No: 24
         
         
            
               
            
         
         
            NO
            ITEM
            QTY
            PRICE
            AMOUNT
         
         
            
               
            
         
         
         
            1
            Pizza
         
         
            
            PZ4545
            2.00
            150.00
            300.00
         
         
            2
            Buggers
         
         
            
            BR7878
            5.00
            500.00
            2500.00
         
         
            3
            Cock
         
         
            
            CC6523
            3.00
            180.00
            540.00
         
         
         
            
               
            
         
         
            
            Net Total
            3340.00
         
         
         
            
            Cash
            3500.00
         
         
            
            Balance
            160.00
         
         
         
            -----------IMPORTANT NOTICE-----------
         
         
            In case of a price discrepancy, 
return the bill and item within 
 2 days to refund the difference

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

DoubleVoid · Accepted Answer

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;


   
      Hello
      
   
   
       
         
         
            
              
              
              
            
         
         
                No: 
         
         
            
               
            
         
         
            NO
            ITEM
            QTY
            PRICE
            AMOUNT
         
         
            
               
            
         
         
         
         
         
            
               
            
         
         
            
            Net Total
            
         
         
         
            
            Cash
            
         
         
            
            Balance
            
         
         
         
            -------IMPORTANT NOTICE-----------

Making a dynamic HTML table using json

Answers (2)

Related Questions