[英]Populate Bootstrap Table with data from json source
I,m new in working with bootstrap and json files and I came to the following problem:我是使用 bootstrap 和 json 文件的新手,我遇到了以下问题:
I've got the following code:我有以下代码:
<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">
And the json I'm working with has the following structure:我正在使用的 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
}
But when I try to run the code I get "No matching records found".但是当我尝试运行代码时,我得到“找不到匹配的记录”。 How do I get the data from a json like this into the table?如何从这样的 json 获取数据到表中?
Many thanks in advance!提前谢谢了!
Edit: I don't know how to exactly get the responseText in here but here's a screenshot of the console.log:编辑:我不知道如何在此处准确获取 responseText 但这是 console.log 的屏幕截图:
What can be observed is that you don't know the key because it is dynamic.可以观察到的是,您不知道密钥,因为它是动态的。 What you can do is, make an ajax call and get the data in a variable.您可以做的是,进行 ajax 调用并获取变量中的数据。 Now you have to flat the response so you can pass the Flat array to Bootstrap table.现在您必须对响应进行扁平化处理,以便将 Flat 数组传递给 Bootstrap 表。 Instead of using data-url attribute you follow the process given in fiddle不使用data-url属性,而是按照 fiddle 中给出的过程进行操作
I have added a fiddle which you can use as an example.我添加了一个小提琴,您可以将其用作示例。 I have also added appropriate comment.我还添加了适当的评论。
HTML 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>
your Script should be你的脚本应该是
<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>
Let me know if you need ajax version of this code.如果您需要此代码的 ajax 版本,请告诉我。
fiddle http://jsfiddle.net/8ngoh4y1/小提琴http://jsfiddle.net/8ngoh4y1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.