使用來自 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 獲取數據到表中？

提前謝謝了！

編輯：我不知道如何在此處准確獲取 responseText 但這是 console.log 的屏幕截圖：

Answer 1

可以觀察到的是，您不知道密鑰，因為它是動態的。 您可以做的是，進行 ajax 調用並獲取變量中的數據。 現在您必須對響應進行扁平化處理，以便將 Flat 數組傳遞給 Bootstrap 表。 不使用data-url屬性，而是按照 fiddle 中給出的過程進行操作

我添加了一個小提琴，您可以將其用作示例。 我還添加了適當的評論。

HTML

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