Loading a JSON file into a table using Bootstrap

Question

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.

Husni Salax · Accepted Answer · 2016-05-14 00:35:54Z

3

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>

edited May 14, 2016 at 0:35

answered May 13, 2016 at 23:43

Husni Salax

2,0181 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user5368737 Over a year ago

Do I simply add the jQuery between the <script></script> in the header? I tried that anyway, and it still doesn't seem to be working.

user5368737 Over a year ago

I updated my question, it still doesn't seem to be working.

Husni Salax Over a year ago

@user5368737, I've edited my solution, You are missed jQuery library, this is that you got error

user5368737 Over a year ago

Just one more question: how can I load the JSON from a file instead of having it in the same file?

Husni Salax Over a year ago

@user5368737, do you want to make another json file?

|

Collectives™ on Stack Overflow

Loading a JSON file into a table using Bootstrap

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related