Загрузка данных из файла json в таблицу bootstrap - PullRequest
Новая
       20

Загрузка данных из файла json в таблицу bootstrap

2 голосов
/ 24 марта 2020

У меня есть веб-приложение flask с файлом json с данными, которые я хочу отобразить в таблице bootstrap. Я перепробовал много вещей, но мне не удалось загрузить данные в таблицу. Отображаются только заголовки таблиц.

Вот мой 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": ""
    }
]

1 Ответ

3 голосов
/ 24 марта 2020

Пожалуйста, сопоставьте JSON ключи с атрибутами поля данных. Все ключи должны быть в нижнем регистре. Изменив все ключи на строчные, я получаю данные в таблицу. 

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