Convert Json Data to a HTML Table

// Create XMLHttpRequest object.const proxyurl = "https://cors-anywhere.herokuapp.com/";const url = "https://www.encodedna.com/library/sample.json";fetch(proxyurl + url)  .then(response => response.text())  .then(contents => createTableFromJSON(contents))  .catch((e) => console.log('error'))
// Create an HTML table using the JSON data.function createTableFromJSON(jsonData) {  var arrBirds = [];  arrBirds = JSON.parse(jsonData); // Convert JSON to array.
  var col = [];  for (var key in arrBirds) {    if (col.indexOf(key) === -1) {      col.push(key);    }  }
  // Create a dynamic table.  var table = document.createElement("table") // Create table header.  var tr = table.insertRow(-1); // Table row. (last position)
  for (var i = 0; i < col.length; i++) {    var th = document.createElement("th"); // Table header.    th.innerHTML = col[i];    tr.appendChild(th);  }
  tr = table.insertRow(-1); // add new row for the names  // Add JSON to the table rows.  for (var i = 0; i < arrBirds.length; i++) {    var tabCell = tr.insertCell(-1);    tabCell.innerHTML = arrBirds[i].Name;  }
  // Finally, add the dynamic table to a container.  var divContainer = document.getElementById("showTable");  divContainer.innerHTML = "";  divContainer.appendChild(table);};

* {  font: 17px 'Segoe UI';}
table,th,td {  border: solid 1px #ddd;  border-collapse: collapse;  padding: 2px 3px;  text-align: center;}
th {  font-weight: bold;}

<h3>  Data extracted from External JSON file and converted to an HTML table</h3><div id='showTable'></div>

Converting a JSON data output to a HTML-TABLE format in Python - Flask?

Your data_all is a list of lists. If you pass a list of dicts to json2html it will format it as an HTML table for you.

For example:

data_all = []
for item in result:
    data_all.append({
        "Name": item["trail name"],
        "Description": item["description"]
    })

Then you can pass this list to json2html:

html_data = json2html.convert(json=data_all)

The resulting HTML will be in the following format:

<table border="1">
<thead>
  <tr><th>Name</th><th>Description</th></tr>
</thead>
<tbody>
  <tr>
    <td>Upper Yosemite Falls</td>
    <td>Upper Yosemite Falls Trail ...</td>
  </tr>
  <tr>
    <td>Vernal and Nevada Falls via the Mist Trail</td>
    <td>Vernal and Nevada Falls via the Mist Trail is a 6.4 mile ...</td>
  </tr>
</tbody>
</table>

How to convert JSON String to HTML Table in Flask?

As I have checked above, try this

        d5 = ['{"pf":"K", "users":1, "events":1},{"pf":"A", "users":7, "events":7},{"pf":"I", "users":3, "events":3}']
        # convert spark json array result to a list.
        finalJson = json.loads("[" + d5[0] + "]") 
    
        return render_template_string('''
        <style>
        table, th, td {
             border: 1px solid black;
        }
        table {
            width:80%;
            border-collapse: collapse;
        }
        td {
            text-align: center
        }
        th:first-child, td:first-child {
            text-align: left
        }
        th:last-child, td:last-child {
            text-align: right
        }
        </style>
        <table>
                <tr>
                    <th> PF </th> 
                    <th> users </th>
                    <th> events </th>
                </tr>
    
        {% for row in table_data %}
    
                <tr>
                    <td>{{ row['pf'] }}</td> 
                    <td>{{ row['users'] }}</td>
                    <td>{{ row['events'] }}</td>
                </tr>
        {% endfor %}
        </table>
    ''', table_data=finalJson)

You could also feel free to modify styles to what you want.

How can I convert this json data to html table with javascript?

Since your object is not flat, you cannot truly render it all to table. You have to make a decision about the nested objects. Below I am simply using json.stringify to show those objects in a table cell. You should of course handle this according to your needs.

const data = [  {    "1": [      {        Time: "01:35 AM",        Location: "dhaka bangladesh",        "BUS Detail": {          air_Logo: "logo goes here",          air_Name: "Airbus"        },        busNo: "AK119",        arrTime: "05:40 AM",        "arrival Loc": "barisal"      }    ]  }];
const base = data[0]["1"];
const table = document.createElement("table");const thead = table.createTHead();const tbody = document.createElement("tbody");table.append(tbody)
const headRow = thead.insertRow();const headers = Object.keys(base[0]).forEach((head) => {  let cell = headRow.insertCell();  cell.textContent = head;});
base.forEach((obj) => {  const row = tbody.insertRow();  const vals = Object.values(obj);  vals.forEach((v) => {    const cell = row.insertCell();    if (typeof(v) !== 'string') {      return cell.textContent = JSON.stringify(v);    }    cell.textContent = v  });});
document.body.append(table)

$(document).ready(function() {  // $.getJSON(url, callback);  $.getJSON('https://api.myjson.com/bins/aruak', function(json) {    tableGenerator('#tableName', json);  });});
function tableGenerator(selector, data) { // data is an array  var keys = Object.keys(Object.assign({}, ...data));// Get the keys to make the header  // Add header  var head = '<thead><tr>';  keys.forEach(function(key) {    head += '<th>'+key+'</th>';  });  $(selector).append(head+'</tr></thead>');  // Add body  var body = '<tbody>';  data.forEach(function(obj) { // For each row    var row = '<tr>';    keys.forEach(function(key) { // For each column      row += '<td>';      if (obj.hasOwnProperty(key)) { // If the obj doesnt has a certain key, add a blank space.        row += obj[key];      }      row += '</td>';    });    body += row+'<tr>';  })  $(selector).append(body+'</tbody>');}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><table id="tableName"></table>