将数据从 json 文件加载到 bootstrap table

Question

我有一个带有 json 文件的 Flask Web 应用程序，其中包含我想在 bootstrap table 中显示的数据。我已经尝试了很多东西，但我无法将我的数据加载到 table。只有 table headers 出现。

这是我的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tools</title>
  <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
</head>
<body>
  {% extends "template.html" %}
  {% block content %}
<h1>Recon</h1>
    <table data-toggle="table" class="display table table-bordered" data-url="static/tools.json" data-height="299">
        <thead>
            <tr>
                <th data-field="Name">Name</th>
                <th data-field="Description">Description</th>
                <th data-field="Link">Data Link</th>
                <th data-field="Language">Language</th>
                <th data-field="Maintained">Maintained</th>
                <th data-field="Stars">Stars</th>
                <th data-field="Author">Author</th>
            </tr>
        </thead>
    </table>
{% endblock %}
    <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>
    <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
</body>
</html>

这是我的 json 数据的示例

[
    {
    "id": "1",
    "name": "Inspy",
    "description": "A python based LinkedIn enumeration tool",
    "link": "https://github.com/leapsecurity/InSpy",
    "language": "Python",
    "maintained": "No",
    "stars": "348",
    "author": "Leap Security"
    },
    {
    "id": "2",
    "name": "AWSBucketDump",
    "description": "Security Tool to Look For Interesting Files in S3 Buckets",
    "link": "https://github.com/jordanpotti/AWSBucketDump",
    "language": "Python",
    "maintained": "No",
    "stars": "889",
    "author": ""
    }
]

Answer 1

请将 JSON 键与数据字段属性相匹配。所有的键都应该是小写的。将所有键更改为小写后，我将数据放入 table。

  
<!DOCTYPE html>
<html lang="en">
<head>
 
  <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
</head>
<body>
 
<h1>Recon</h1>
    <table id="table" data-toggle="table" class="display table table-bordered" data-url="static/tools.json" data-height="299">
        <thead>
            <tr>
                <th data-field="name">Name</th>
                <th data-field="description">Description</th>
                <th data-field="link">Data Link</th>
                <th data-field="language">Language</th>
                <th data-field="maintained">Maintained</th>
                <th data-field="stars">Stars</th>
                <th data-field="author">Author</th>
            </tr>
        </thead>
    </table>

    <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>
    <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
</body>
</html>

将数据从 json 文件加载到 bootstrap table

Load data from json file into a bootstrap table

html

jquery

bootstrap-table