How to load data from JSON into a Bootstrap Table? - GeeksforGeeks

16 Jul, 2020
This article describes how a Bootstrap Table is created using a given JSON  data. The data can be retrieved by either importing it or representing it in JavaScript. The following are given two methods to do it.
Displaying JSON data without importing any file: The JSON file that has to be read can be represented using JavaScript. This can then be given to the Bootstrap Table to represent the data.
Example:
HTML
<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport"         content="width=device-width,                 initial-scale=1,                 shrink-to-fit=no">  <title>    load data from json file     into a bootstrap table  </title>    <!-- Include Bootstrap for styling -->  <link rel="stylesheet"        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <!-- Include the Bootstrap Table CSS  for the table -->  <link rel="stylesheet"         href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css"></head><body>  <div class="container">    <h1 class="text text-success text-center ">      GeeksforGeeks    </h1>    <h6 class="text text-success text-center">      A computer science portal for geeks    </h6>      <table class="table-striped border-success">        <thead>          <tr>            <th data-field="id">              <span class="text-success">                Employee ID              </span>            </th>            <th data-field="name">              <span class="text-success">                Employee Name               </span>            </th>            <th data-field="date">              <span class="text-success">                Joining Date               </span>            </th>          </tr>        </thead>      </table>  </div>    <!-- Include jQuery and other required  files for Bootstrap -->  <script src="https://code.jquery.com/jquery-3.3.1.min.js">  </script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">  </script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">  </script>    <!-- Include the JavaScript file  for Bootstrap table -->  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js">  </script>  <script type="text/javascript">    $(document).ready(function () {        // Use the given data to create       // the table and display it      $('table').bootstrapTable({        data: mydata      });    });      // Specify the JSON data to be displayed    var mydata =      [        {          "id": "24323",          "name": "Mark Smith",          "date": "25/5/2020"        },        {          "id": "24564",          "name": "Caitlin MacDonald",          "date": "17/5/2020"        },        {          "id": "24345",          "name": "Jessie Johnson ",          "date": "1/5/2020"        },        {          "id": "24874",          "name": "Alen Williams",          "date": "14/5/2020"        },        {          "id": "24323",          "name": "Maria Garcia ",          "date": "13/5/2020"        }      ];  </script></body></html>
Output:
Displaying JSON data after importing it from a file: The JSON data to be displayed is stored in a local folder in a JavaScript file that is imported. This imported data can then be given to the Bootstrap Table to represent the data. ES6 feature backticks (` `) can be used for the multi-line string value interpolation.
Example: 
JSON Data: The JSON data stored in the below example:JavascriptJavascript// Contents for test.js// Represents JSON of the data  var da = `[    { "id": "24323",       "name": "Mark Smith",       "date": "25/5/2020" },    { "id": "24564",      "name": "Caitlin MacDonald",       "date": "17/5/2020" }]`;
JSON Data: The JSON data stored in the below example:
Javascript
// Contents for test.js// Represents JSON of the data  var da = `[    { "id": "24323",       "name": "Mark Smith",       "date": "25/5/2020" },    { "id": "24564",      "name": "Caitlin MacDonald",       "date": "17/5/2020" }]`;
Program:  To load data from JSON into a Bootstrap TableHTMLHTML<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport"         content="width=device-width,                  initial-scale=1,                  shrink-to-fit=no">  <title>    load data from json file    into a bootstrap table  </title>    <!-- Include Bootstrap for styling -->  <link rel="stylesheet"         href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <!-- Include the Bootstrap Table  CSS for the table -->  <link rel="stylesheet"        href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css"></head><body>  <div class="container">    <h1 class="text text-success text-center ">      GeeksforGeeks    </h1>    <h6 class="text text-success text-center">      A computer science portal for geeks    </h6>      <table class="table-striped border-success">        <thead>          <tr>            <th data-field="id">              <span class="text-success">                Employee ID              </span>            </th>            <th data-field="name">              <span class="text-success">                Employee Name               </span>            </th>            <th data-field="date">              <span class="text-success">                 Joining Date               </span>            </th>          </tr>        </thead>      </table>  </div>    <!-- Include jQuery and other required files for Bootstrap -->  <script src="https://code.jquery.com/jquery-3.3.1.min.js">  </script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">  </script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">  </script>    <!-- Include the JavaScript file for Bootstrap table -->  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js">  </script>    <!-- Include the file where the JSON data is stored -->  <script type="text/javascript"           src="test.js">  </script>  <script type="text/javascript">    $(document).ready(function () {        // Use the given data to create       // the table and display it      $('table').bootstrapTable({        data: mydata      });    });      // Parse the imported data as JSON    // and store it    var mydata = JSON.parse(da)  </script></body></html>
Program:  To load data from JSON into a Bootstrap Table
HTML
<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport"         content="width=device-width,                  initial-scale=1,                  shrink-to-fit=no">  <title>    load data from json file    into a bootstrap table  </title>    <!-- Include Bootstrap for styling -->  <link rel="stylesheet"         href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <!-- Include the Bootstrap Table  CSS for the table -->  <link rel="stylesheet"        href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css"></head><body>  <div class="container">    <h1 class="text text-success text-center ">      GeeksforGeeks    </h1>    <h6 class="text text-success text-center">      A computer science portal for geeks    </h6>      <table class="table-striped border-success">        <thead>          <tr>            <th data-field="id">              <span class="text-success">                Employee ID              </span>            </th>            <th data-field="name">              <span class="text-success">                Employee Name               </span>            </th>            <th data-field="date">              <span class="text-success">                 Joining Date               </span>            </th>          </tr>        </thead>      </table>  </div>    <!-- Include jQuery and other required files for Bootstrap -->  <script src="https://code.jquery.com/jquery-3.3.1.min.js">  </script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">  </script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">  </script>    <!-- Include the JavaScript file for Bootstrap table -->  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js">  </script>    <!-- Include the file where the JSON data is stored -->  <script type="text/javascript"           src="test.js">  </script>  <script type="text/javascript">    $(document).ready(function () {        // Use the given data to create       // the table and display it      $('table').bootstrapTable({        data: mydata      });    });      // Parse the imported data as JSON    // and store it    var mydata = JSON.parse(da)  </script></body></html>
Output:
Output:
JSON
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?