JSON to TAble

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!DOCTYPE html>
<html>
<head>
    <title>Convert JSON Data to HTML Table</title>

</head>
<body>

    <input type='button' onclick='tableFromJson()' 
    	value='Create Table from JSON data' />
        
         <div class="form-group row">
              <div class="col-md-12" id="tableJSONRender">
                
              </div>

            </div>
</body>

<script>
	// scroll down for ES6 features. 

	// using regular methods.

    function tableFromJson() {
		// the json data. (you can change the values for output.)
        var myBooks = [{"CHAPA":"00425","VALOR":" R$100.00 "},{"CHAPA":"00426","VALOR":" R$1,500.00 "},{"CHAPA":"00427","VALOR":" R$99.99 "}]

        var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

var table = '<table class="table table-hover">'
			table += '<thead>'
				table += '<tr>'
            for (var i = 0; i < col.length; i++) {

table += '<th>' + col[i] + '</th>'

        }
        
        
      
				table += '</tr>'
			table += '</thead>'
			table += '<tbody>'
      
           for (var i = 0; i < myBooks.length; i++) {

        
table += '<tr>'
            for (var j = 0; j < col.length; j++) {
     
                table += '<td>' + myBooks[i][col[j]]  + '</td>' 
            }
            table += '</tr>'
        }
      
      
     
			table += '</tbody>'
		table += '</table>'


     
      ...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}