Saya memiliki aplikasi web flask dengan file json dengan data yang ingin saya tampilkan di tabel bootstrap. Saya telah mencoba banyak hal tetapi saya belum bisa memuat data saya ke dalam tabel. Hanya header tabel yang muncul.

Ini HTML saya

<!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>

Dan ini adalah contoh data json saya

[
    {
    "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": ""
    }
]
2
Q.Jig 24 Maret 2020, 08:42

1 menjawab

Jawaban Terbaik

Harap cocokkan kunci JSON dengan atribut bidang data. Semua kunci harus dalam huruf kecil. Setelah mengubah semua kunci menjadi huruf kecil, saya memasukkan data ke dalam tabel.

  
<!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>
3
prathameshk73 24 Maret 2020, 06:14