使用 json 源中的数据填充 Bootstrap 表

Question

我是使用 bootstrap 和 json 文件的新手，我遇到了以下问题：

我有以下代码：

<div class="container">

  <h1 class="text text-success text-center ">Kontoauszug</h1>

  <table id="table" data-toggle="table" data-url="/json/data.json">

    <thead>

    <tr>

      <th data-field="auszug.betrag">ID</th>

      <th data-field="auszug.unix">Item Name</th>

      <th data-field="auszug.transaktionsart">Item Price</th>

    </tr>

    </thead>

  </table>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<link rel="stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href= "https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css">

我正在使用的 json 具有以下结构：

{

  "auszug": {

    "1604400036082-3450": {

      "betrag": -367.5,

      "von/an_uuid": "Test1",

      "von/an": "Test1",

      "autorisiert-durch": "SYSTEM",

      "unix": 1604400036,

      "transaktionsart": "Lohnzahlung"

    },

    "1604406781759-8437": {

      "betrag": 85.17,

      "von/an": "Test2",

      "autorisiert-durch": "SYSTEM",

      "unix": 1604406782,

      "transaktionsart": "Überweisung"

    },

    "1604395596115-5983": {

      "betrag": 1226.48,

      "von/an": "Test3",

      "autorisiert-durch": "SYSTEM",

      "unix": 1604395596,

      "transaktionsart": "Überweisung"

    }

  },

  "kontonummer": "DEF05487151498683",

  "kontostand": 44641548.66,

  "success": true

}

但是当我尝试运行代码时，我得到“找不到匹配的记录”。如何将这样的 json 数据获取到表中？

Answer 1

可以观察到的是，您不知道密钥，因为它是动态的。您可以做的是进行 ajax 调用并获取变量中的数据。现在您必须平坦响应，以便可以将平坦数组传递到 Bootstrap 表。您不使用data-url属性，而是遵循 fiddle 中给出的过程我添加了一个小提琴，您可以将其用作示例。我还添加了适当的评论。超文本标记语言<link href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css" rel="stylesheet"><script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script><table id="table">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th data-field="betrag">betrag</th>&nbsp; &nbsp; &nbsp; <th data-field="autorisiert-durch">autorisiert-durch</th>&nbsp; &nbsp; &nbsp; <th data-field="unix">unix</th>&nbsp; &nbsp; </tr>&nbsp; </thead></table>你的脚本应该是<script>var $table = $('#table')&nbsp; $(function() {&nbsp;&nbsp;&nbsp; // do an ajax call here to get the response. your response should be like responseData&nbsp;&nbsp;&nbsp; var responseData = {&nbsp; &nbsp; "1604400036082-3450": {&nbsp; &nbsp; &nbsp; &nbsp; "betrag": -367.5,&nbsp; &nbsp; &nbsp; &nbsp; "von/an_uuid": "asdqwe2413",&nbsp; &nbsp; &nbsp; &nbsp; "von/an": "Test1",&nbsp; &nbsp; &nbsp; &nbsp; "autorisiert-durch": "SYSTEM",&nbsp; &nbsp; &nbsp; &nbsp; "unix": 1604400036,&nbsp; &nbsp; &nbsp; &nbsp; "transaktionsart": "Überweisung"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; "1604406781759-8437": {&nbsp; &nbsp; &nbsp; &nbsp; "betrag": 85.17,&nbsp; &nbsp; &nbsp; &nbsp; "von/an": "Test2",&nbsp; &nbsp; &nbsp; &nbsp; "autorisiert-durch": "SYSTEM",&nbsp; &nbsp; &nbsp; &nbsp; "unix": 1604406782,&nbsp; &nbsp; &nbsp; &nbsp; "transaktionsart": "Überweisung"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; };&nbsp;&nbsp;&nbsp; var data = [];&nbsp;&nbsp;&nbsp; // Here you have to flat the array&nbsp; Object.keys(responseData).forEach(function(key){&nbsp;&nbsp;&nbsp;&nbsp; var value = responseData[key];&nbsp;&nbsp; data.push(value);&nbsp; })&nbsp; &nbsp; $table.bootstrapTable({data: data})&nbsp; })&nbsp;&nbsp;&nbsp; </script>如果您需要此代码的 ajax 版本，请告诉我。小提琴http://jsfiddle.net/8ngoh4y1/