I am trying to use bootstrap table to load json data. how can i load an external json file into the bootstrap table below.

FIDDLE

HTML

<table data-toggle="table"
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"
       data-click-to-select="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

JSON

{
      "Name": "Jeame whos",
      "LoanApproved": "12/5/2015",
      "LastActivity": "4/1/2016",
      "Aging": "3",
      "Brokerage": "My Broker",
      "Contact": "J. Johnson",
      "ContactPhone": "(212) 902-3614",
      "RiskCategory": "Yellow",
      "rows": [{
        "Account": "086-1234",
        "ClientName": "Sally Sung",
        "AccountType": "$01",
        "MarketValue": "450000"
      },  {
        "Account": "086-1235",
          "ClientName": "Sally Sung",
        "AccountType": "rust",
        "MarketValue": "550000"
      },
       {
        "Account": "086-1236",
          "ClientName": "Sally Sung",
        "AccountType": "Retail",
        "MarketValue": "550000"
      }]
    }

I am trying to use bootstrap table to load json data. how can i load an external json file into the bootstrap table below.

FIDDLE

HTML

<table data-toggle="table"
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"
       data-click-to-select="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

JSON

{
      "Name": "Jeame whos",
      "LoanApproved": "12/5/2015",
      "LastActivity": "4/1/2016",
      "Aging": "3",
      "Brokerage": "My Broker",
      "Contact": "J. Johnson",
      "ContactPhone": "(212) 902-3614",
      "RiskCategory": "Yellow",
      "rows": [{
        "Account": "086-1234",
        "ClientName": "Sally Sung",
        "AccountType": "$01",
        "MarketValue": "450000"
      },  {
        "Account": "086-1235",
          "ClientName": "Sally Sung",
        "AccountType": "rust",
        "MarketValue": "550000"
      },
       {
        "Account": "086-1236",
          "ClientName": "Sally Sung",
        "AccountType": "Retail",
        "MarketValue": "550000"
      }]
    }

• javascript
• jquery
• css
• twitter-bootstrap

• I hope those aren't real personal details. If they are, then consider pletely deleting this question and asking again. – Andrew Commented Mar 15, 2017 at 15:56

1 Answer 1

I noticed that your JSON is not valid. Refer to line "Name": "Jeames "C0010", there is an extra quote. It should be "Name": "Jeames C0010",.

However, I also wrote up an example as well:

$.getJSON("http://neil.puter/stack/response.json", function (jsonFromFile) {
	$('#table').bootstrapTable({
		data: jsonFromFile.rows
	})
});

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>

<div class="container">
	<table id="table">
		<thead>
			<tr>
				<th data-field="Account">Item ID</th>
				<th data-field="ClientName">Item Name</th>
				<th data-field="AccountType">Item Price</th>
				<th data-field="MarketValue">Item Price</th>
			</tr>
		</thead>
	</table>
</div>