如何从 JSON 动态创建 Bootstrap 表答案

【问题标题】：How to create a Bootstrap table dynamically from JSON如何从 JSON 动态创建 Bootstrap 表
【发布时间】：2021-08-07 11:19:59
【问题描述】：

我不知道如何在不使用任何硬编码标题的情况下将动态 JSON 数据添加到表中。数据取自data-url。

<table id="table" data-toggle="table" data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"></table>

$('#table').bootstrapTable({})

【问题讨论】：

我用的是bootstrap table API，从这里可以看到bootstrap-table.com/docs/getting-started/introduction，数据是API自己加载的
感谢您的澄清。从 documentation 那里它声明您必须定义 JSON 的列，以便它们可以映射到表中的列。它不允许您在不映射字段的情况下动态加载数据。如果您需要这种行为，我建议您找到另一个库或编写自己的库。
是的，这就是我面临的问题，但是，这是堆栈溢出的解决方案，我不明白stackoverflow.com/q/52863669/15512069
该解决方案实际上就是我上面提到的“自己编写”方法。如果您难以理解它的工作原理，我建议您研究 AJAX 并查找一些教程。
是的，谢谢你的帮助！！

标签： javascript jquery twitter-bootstrap bootstrap-4

【解决方案1】：

I found the answer

 var dataSet = [{
  Latitude: 18.00,
  state:"odisha",
  Longitude: 23.00,
  Name: "Pune"
}, {
  Latitude: 14.00,
  state:"odisha",
  Longitude: 24.00,
  Name: "Mumbai"
}, {
  Latitude: 34.004654,
  state:"odisha",
  Longitude: -4.005465,
  Name: "Delhi"
}, {
  Latitude: 23.004564,
  state:"odisha",
  Longitude: 23.007897,
  Name: "Jaipur"
}]
var temp = JSON.stringify(Object.assign({},dataSet));
var arr = JSON.parse(temp)
console.log(arr)




var my_columns = [];

$.each( dataSet[0], function( key, value ) {
        var my_item = {};
        my_item.data = key;
        my_item.title = key;
        my_columns.push(my_item);
});



$(document).ready(function() {
  $('#table').bootstrapTable({
   
    "columns": my_columns,
     data:dataSet
  });
});

【讨论】：