user5368737 user5368737 - 6 months ago 17
HTML Question

Loading a JSON file into a table using Bootstrap

I'm completely new to creating websites and stuff like that, and I've been unable to do something that should be very simple. I want to load a JSON file in the same directory into a table. I've been searching for an answer and nothing seems to be working for me, so I must be doing something wrong.

I found this which I tried using, but after trying so many things I couldn't get it to work. In my case I would have

data
in a JSON file in the same directory.

My test.html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Hello World">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<script>
var data =
[
{
"id": 0,
"name": "test0",
"price": "$0"
},
{
"id": 1,
"name": "test1",
"price": "$1"
},
{
"id": 2,
"name": "test2",
"price": "$2"
},
{
"id": 3,
"name": "test3",
"price": "$3"
},
{
"id": 4,
"name": "test4",
"price": "$4"
},
{
"id": 5,
"name": "test5",
"price": "$5"
},
{
"id": 6,
"name": "test6",
"price": "$6"
},
{
"id": 7,
"name": "test7",
"price": "$7"
},
{
"id": 8,
"name": "test8",
"price": "$8"
},
{
"id": 9,
"name": "test9",
"price": "$9"
},
{
"id": 10,
"name": "test10",
"price": "$10"
},
{
"id": 11,
"name": "test11",
"price": "$11"
},
{
"id": 12,
"name": "test12",
"price": "$12"
},
{
"id": 13,
"name": "test13",
"price": "$13"
},
{
"id": 14,
"name": "test14",
"price": "$14"
},
{
"id": 15,
"name": "test15",
"price": "$15"
},
{
"id": 16,
"name": "test16",
"price": "$16"
},
{
"id": 17,
"name": "test17",
"price": "$17"
},
{
"id": 18,
"name": "test18",
"price": "$18"
},
{
"id": 19,
"name": "test19",
"price": "$19"
},
{
"id": 20,
"name": "test20",
"price": "$20"
}
];

$(function () {
$('#table').bootstrapTable({
data: data
});
});
</script>
</head>

<body>
<header>
<div class="jumbotron">
<div class="container">
<h3>Testing table in bootstrap</h3>
</div>
</div>
</header>

<div class="container">
<div class="row">
<table id="table" class="table table-bordered">
<thead>
<tr class="info">
<th data-field="id">First name</th>
<th data-field="name">Last name</th>
<th data-field="price">Age</th>
</tr>
<thead>
</table>
</div>
</div>


<footer>
<div class="container">
<hr>
<p><small><a href="http://google.com">Link</a> link</small></p>
</div>
</footer>

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>


I simply want to load a JSON file into a table using Bootstrap.

Answer

All your external scripts must be in head tag

 var data = 
  [
      {
          "id": 0,
          "name": "test0",
          "price": "$0"
      },
      {
          "id": 1,
          "name": "test1",
          "price": "$1"
      },
      {
          "id": 2,
          "name": "test2",
          "price": "$2"
      },
      {
          "id": 3,
          "name": "test3",
          "price": "$3"
      },
      {
          "id": 4,
          "name": "test4",
          "price": "$4"
      },
      {
          "id": 5,
          "name": "test5",
          "price": "$5"
      },
      {
          "id": 6,
          "name": "test6",
          "price": "$6"
      },
      {
          "id": 7,
          "name": "test7",
          "price": "$7"
      },
      {
          "id": 8,
          "name": "test8",
          "price": "$8"
      },
      {
          "id": 9,
          "name": "test9",
          "price": "$9"
      },
      {
          "id": 10,
          "name": "test10",
          "price": "$10"
      },
      {
          "id": 11,
          "name": "test11",
          "price": "$11"
      },
      {
          "id": 12,
          "name": "test12",
          "price": "$12"
      },
      {
          "id": 13,
          "name": "test13",
          "price": "$13"
      },
      {
          "id": 14,
          "name": "test14",
          "price": "$14"
      },
      {
          "id": 15,
          "name": "test15",
          "price": "$15"
      },
      {
          "id": 16,
          "name": "test16",
          "price": "$16"
      },
      {
          "id": 17,
          "name": "test17",
          "price": "$17"
      },
      {
          "id": 18,
          "name": "test18",
          "price": "$18"
      },
      {
          "id": 19,
          "name": "test19",
          "price": "$19"
      },
      {
          "id": 20,
          "name": "test20",
          "price": "$20"
      }
  ];

  $(function () {
      $('#table').bootstrapTable({
          data: data
      });
  });
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <!--All your external script goes here!!!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
 
</head>

<body>
  <header>
    <div class="jumbotron">
      <div class="container">
        <h3>Testing table in bootstrap</h3>
      </div> 
    </div> 
  </header>

  <div class="container">
    <div class="row">
      <table id="table">
        <thead>
          <tr class="info">
            <th data-field="id">First name</th>
            <th data-field="name">Last name</th>
            <th data-field="price">Age</th>
          </tr>
        <thead>
      </table>
    </div>
  </div>


  <footer>
    <div class="container">
      <hr>
    </div>
  </footer>

</body> 
</html>

Comments