Parse big JSON Data info HTML Table

Question

I want to implement the JSON File into an HTML Table. In my case it doesnt work however. The table should show all data at once (if possible)

<!DOCTYPE html>
<html>
<body>

<h2>Make a table based on JSON data.</h2>

<p id="demo"></p>

<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "name", limit: 50 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    txt += "<table border='1'>"
    for (x in myObj) {
      txt += "<tr><td>" + myObj[x].name + "</td></tr>";
    }

    txt += "</table>"    
    document.getElementById("demo").innerHTML = txt;
  }
};
xmlhttp.open("GET", "http://infoportal.vag.de/InfoPortal/busstations.xhr", true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.send("x=" + dbParam);
</script>

</body>
</html>

Answer 1

this code should work (but not within this snippet)

 const Limit = 20, LoadingTable = document.getElementById('Loading-Table') ; let xdr = getXDomainRequest("get", "http://infoportal.vag.de/InfoPortal/busstations.xhr"); if (!xdr) { throw new Error("no cross-domain allowed by your browser :/"); }; xdr.onload = function() { jsonData = JSON.parse(xdr.responseText); let line = 0; for (elm in jsonData) { let row = LoadingTable.insertRow(line), c_0 = row.insertCell(0), c_1 = row.insertCell(1), c_2 = row.insertCell(2), c_3 = row.insertCell(3) ; c_0.textContent = elm; c_1.textContent = jsonData[elm].name; c_2.textContent = jsonData[elm].x; c_3.textContent = jsonData[elm].y; if (++line >= Limit) break; } } xdr.send(); function getXDomainRequest( method, url ) { var xdr = null; if (window.XDomainRequest) { // MS ie xdr = new XDomainRequest(); xhr.open(method, url); } else if (window.XMLHttpRequest) { xdr = new XMLHttpRequest(); if ('withCredentials' in xdr) { xdr.open(method, url, true); } else { xdr = null; } } return xdr; }

 body { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } #Loading-Table { border-collapse: collapse; } #Loading-Table, #Loading-Table td { border: 1px solid grey; } #Loading-Table td { padding: 2px 10px; }

 <h2>Make a table based on JSON data.</h2> <p id="demo"></p> <table id="Loading-Table" ></table>

Parse big JSON Data info HTML Table

Question

1 answers

solution1
0 ACCPTED 2018-12-27 01:17:16

Parse big JSON Data info HTML Table

Question

1 answers

solution1 0 ACCPTED 2018-12-27 01:17:16

solution1
0 ACCPTED 2018-12-27 01:17:16