Javascript Convert JSON Data to HTML Data Using Bootstrap and jQuery Library Full Project For Beginners

Javascript Convert JSON Data to HTML Data Using Bootstrap and jQuery Library Full Project For Beginners

 

Welcome folks today in this blog post we will be converting json data to html table using bootstrap and jquery in javascript. All the full source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
  <head>
    <title>JSON to Table in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="container">
        <div class="page-header">
          <h1>JSON to Table</h1>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="alert alert-info">This function requires jQuery. There is also a <a href="https://codepen.io/travishorn/pen/qXvaKa">dependency-free version</a>.</div>
          </div>
          
          <div class="col-md-6">
            <div class="form-group">
              <label for="data">Data</label>
              <textarea name="data" id="data" rows="20" class="form-control"></textarea>
            </div><!-- form-group -->
          </div><!-- /col -->
          <div class="col-md-6">
            <table id="table" class="table"></table>
          </div><!-- col -->
        </div><!-- /row -->
      </div><!-- container -->
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>
</html>

 

 

Now make a script.js file and copy paste the following code

 

script.js

 

var defaultData = [
  { country: 'China',         population: 1379510000 },
  { country: 'India',         population: 1330780000 },
  { country: 'United States', population:  324788000 },
  { country: 'Indonesia',     population:  260581000 },
  { country: 'Brazil',        population:  206855000 },
];

var dom = {
  $data: $('#data'),
  $table: $('#table'),
};

function json2table(json, $table) {
  var cols = Object.keys(json[0]);

  var headerRow = '';
  var bodyRows = '';

  function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }
  
  $table.html('<thead><tr></tr></thead><tbody></tbody>');

  cols.map(function(col) {
    headerRow += '<th>' + capitalizeFirstLetter(col) + '</th>';
  });

  json.map(function(row) {
    bodyRows += '<tr>';

    cols.map(function(colName) {
      bodyRows += '<td>' + row[colName] + '</td>';
    })

    bodyRows += '</tr>';
  });

  $table.find('thead tr').append(headerRow);
  $table.find('tbody').append(bodyRows);
}

dom.$data.val(JSON.stringify(defaultData));
json2table(defaultData, dom.$table);

dom.$data.on('input', function() {
  json2table(JSON.parse(dom.$data.val()), dom.$table);
});

 

READ  React.js Youtube Video Embed as a IFrame Using React-Youtube and get-youtube-id Library Full App

 

Now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply