CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-4
TANMOY BANERJEE
TANMOY BANERJEE

Reputation: 11

How to create a Bootstrap table dynamically from JSON

I don't know how to add dynamic JSON data in to the table without using any hardcoded headers. The data is fetched from the data-url.

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

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

Upvotes: 0

Views: 4300

Answers (1)

TANMOY BANERJEE
TANMOY BANERJEE

Reputation: 11

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
  });
});

Upvotes: 1

Related Questions