使用 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">

  <thead>

    <tr>

      <th data-field="betrag">betrag</th>

      <th data-field="autorisiert-durch">autorisiert-durch</th>

      <th data-field="unix">unix</th>

    </tr>

  </thead>

</table>

你的脚本应该是

<script>

var $table = $('#table')

  $(function() {

  

  // do an ajax call here to get the response. your response should be like responseData

  

  var responseData = {

    "1604400036082-3450": {

        "betrag": -367.5,

        "von/an_uuid": "asdqwe2413",

        "von/an": "Test1",

        "autorisiert-durch": "SYSTEM",

        "unix": 1604400036,

        "transaktionsart": "Überweisung"

        },

    "1604406781759-8437": {

        "betrag": 85.17,

        "von/an": "Test2",

        "autorisiert-durch": "SYSTEM",

        "unix": 1604406782,

        "transaktionsart": "Überweisung"

        },

    };

  

  var data = [];

  

  // Here you have to flat the array

  Object.keys(responseData).forEach(function(key){ 

  

  var value = responseData[key]; 

  data.push(value);

  })

    $table.bootstrapTable({data: data})

  })

  

  </script>

如果您需要此代码的 ajax 版本，请告诉我。

小提琴http://jsfiddle.net/8ngoh4y1/