How to load data from JSON into a Bootstrap Table? Last Updated : 16 Jul, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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/[email protected]/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/[email protected]/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: 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 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/[email protected]/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/[email protected]/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: Comment More infoAdvertise with us Next Article How to Create a Pricing Table in Bootstrap? A abhishekkharmale Follow Improve Article Tags : Web Technologies Bootstrap JSON Similar Reads How to Pass Data into a Bootstrap Modal? Bootstrap along with HTML and JavaScript can be used to build responsive web pages. A modal is a popup or dialog box that requires some action to be performed. A modal. Bootstrap has an inbuilt modal component. The modal consists of two parts the modal header and the modal body. Data can be passed t 3 min read How to Create a Responsive Table in Bootstrap ? A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens.Table of Content Using the table-responsive 4 min read How to Create a Pricing Table in Bootstrap? Pricing tables are essential for showcasing different pricing plans or subscription options for products or services to the user. With the help of the pricing tables plans users can avail their plans accordingly. We will focus on the steps to create a pricing table in Bootstrap. ApproachFirst, creat 3 min read How to parse JSON Data into React Table Component ? In React parsing JSON Data into React Table Component is a common task to represent and structure data. We can render the JSON data into a table dynamically using the array map.Prerequisites:NPM & Node JSReact JSJSON parse()ApproachTo render JSON data in React Table we will be using the JavaScri 2 min read How to create Hoverable Table Rows in Bootstrap 5 ? This feature is particularly useful in web applications, dashboards, or scenarios where tabular data is presented, improving the overall user experience and interface. To achieve the effect of hoverable table rows we use the bootstrap class "table-hover" in the <table> tag. This effect enhance 2 min read How to load data from nested arrays in DataTables ? DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for a webpage. It is a very simple-to-use plug-in with a variety of options for the developer’s custom changes as per the application need. The plugin’s features include pagination, sorting, searching, 4 min read Like