title: How to convert JSON data to Tabulator table
body: <p>I have some JSON data that I need to use in Tabulator table.</p>
  
  <p>Simple example here from tabulator.
  <a href="http://tabulator.info/docs/4.2/quickstart" rel="nofollow noreferrer">http://tabulator.info/docs/4.2/quickstart</a> I have to convert the JSON, but am struggling to find a dynamic solution where, say if I had an extra key with key values, it would still work with tabulator table. Here is my JSON data.</p>
  
  <pre><code>{
    "Aspen_Premium": [
      279245, 
      945317, 
      118388
    ], 
    "Brokerage_Upfront": [
      825831, 
      141166, 
      507242
    ], 
    "Brokers": [
      "JLT", 
      "Willis", 
      "BMS"
    ]
  }
  </code></pre>
  
  <p>I need to have it in a JavaScript file like this.</p>
  
  <pre><code>var tabledata = [
      {id: 1, Aspen_Premium: 279245, Brokerage_Upfront: 825831, Brokers: "JTL"},    
      {id: 2, Brokerage_Upfront: 945317, Brokerage_Upfront: 141166, Brokers: "Willis"},
      {id: 3, Brokers: 118388, Brokerage_Upfront: 507242, Brokers: "BMS"},    
  ]
  
  
  var table = new Tabulator("#broker-table", {
      height:205, 
      data:tabledata, 
      layout:"fitColumns", 
      columns:[ 
          {title:"Aspen_Premium", field:"Aspen_Premium", width:150},
          {title:"Brokerage_Upfront", field:"Brokerage_Upfront"},
          {title:"Brokers", field:"Brokers"},
  
      ],
      rowClick:function(e, row){ //trigger an alert message when the row is clicked
          alert("Row " + row.getData().id + " Clicked!!!!");
      },
  });
  </code></pre>
  
  <p>My HTML is simply:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Check 1&lt;/title&gt;
  
  &lt;link href="https://unpkg.com/tabulator-tables@4.2.2/dist/css/tabulator.min.css" rel="stylesheet"&gt;
  &lt;script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.2/dist/js/tabulator.min.js"&gt;&lt;/script&gt;
  
  &lt;script   src="http://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script   src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"   integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div id="broker-table"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript" src="{{url_for('static',filename='js/checking1.js')}}"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm using Python Flask. Hence the link for the javascript file, checking1.js has src="{{url_for('static', filename='js/checking1.js')}}"></p>
  
  <p>Any help would be greatly appreciated as I've been struggling with this for several hours trying to do the conversion from JSON to the above hard coded version.
  I tried with a for loop, but kept getting issues.</p>
  
  <p>Example of how I was grabbing my JSON data from <a href="http://127.0.0.1:5000/broker_data" rel="nofollow noreferrer">http://127.0.0.1:5000/broker_data</a></p>
  
  <pre><code>$.get("/broker_data").then(function(data){
  
      var columns = Object.keys(data);
  
      var tabledata = [];
  
      for(var i = 0; i &lt; data[columns[0]].length; i++){
  
  
          tabledata.push({"id": i+1, "Aspen": data[columns[0]][i]})
      } console.log(tabledata);
  });
  </code></pre>
  
  <p>The above is not ideal as I have to hardcode the "Aspen" key name.</p>