Parse big JSON Data info HTML Table - javascript

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>

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>

Related

Javascript and json pharse loop with external file

I should loop this json file to javascript, all the entries are important and must be retrieved.
I need to make this json compatible with this javascript code.
This is my json file:
{ "user_token":"6664e310e87f75ad4fd5674a976f8310", "lesson_language":"it_de", "language_app":"it", "main_levels":[ { "level":"1_it_de" }, { "level":"5_it_de" } ] }
This is my code javascript:
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
var user_token = arr[0].user_token;
for(i = 0; i < arr.length; i++) {
var level = arr[i].level;
out += user_token;
}
document.getElementById("id01").innerHTML = out;
}
var jsonInput={ "user_token":"6664e310e87f75ad4fd5674a976f8310", "lesson_language":"it_de", "language_app":"it", "main_levels":[ { "level":"1_it_de" }, { "level":"5_it_de" } ] }
function myFunction(arr) {
var out = "";
var i;
var userLabel=''
var user_token = arr.user_token;
mainArrObj=arr.main_levels
for(i = 0; i < mainArrObj.length; i++) {
var level = mainArrObj[i].level;
out += user_token + ' ';
userLabel += level + ' ';
}
console.log('user_token :'+out);
console.log('userLabel :'+userLabel);
}
myFunction(jsonInput)

Json parser and loop scheme

How can I loop my json file using my script, eg: I should choose whether to loop Schema A or Schema B.
My json file is:
{
"A":[
{
"id":"1",
"title":"Primo"
},
{
"id":"2",
"title":"Secondo"
}
],
"B":[
{
"id":"1",
"title":"Primo"
},
{
"id":"2",
"title":"Secondo"
}
]
}
Maybe setting a variable so as to define the scheme I have to display
My javascript file is:
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += arr[i].id + ' - ' + arr[i].title + '<br>';
}
document.getElementById("id01").innerHTML = out;
}
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj= JSON.parse(this.responseText);
myFunction(obj, 'A');
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(obj, key) {
var arr = obj[key];
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += arr[i].id + ' - ' + arr[i].title + '<br>';
}
document.getElementById("id01").innerHTML = out;
}
Assuming that what you presented as JSON file is a response form network and is passed to myFunction, then why not to do something like:
let myRootArray;
if(/* some confitions */) {
myRootArray = myArr.A
} else {
myRootArray = myArr.B
}
myFunction(myRootArray );
Beside that, your names are a bit confusing, var myArr = JSON.parse(this.responseText);, while JSON.parse will return object, not an array.

No output error when attempting to display json

When the following code executes it's showing no output. Can anyone tell me where I am going wrong?
html file:
<head>
<script type = "text/javascript">function ajax_get_json()
{
var hr = new XMLHTTPRequest();
hr.open("GET","mylist.json",true);
hr.setRequestHeader("Content-type :application/json",true);
hr.onread
ystatechange = function()
{
if(hr.readyState == 4 && hr.status == 200)
{
var data = JSON.parse(hr.responseText);
var results=document.getElementById("results");
results.innerHTML = data.user;
}
}
hr.send(null);
results.innerHTML = "requesting...";
}
</script>
</head>
<body>
<div id="results"></div>
<script type = "text/javascript">ajax_get_json();</script>
</body>
json file:
{ "user":"John", "age":22, "country":"US" }
XMLHTTPRequest() must be XMLHttpRequest(). The JavaScript file looks like:
function request() {}
request();
HTML
<script src="file.js"></script>
With var data = JSON.parse(hr.responseText); you have on object.
Go through the object:
for(var key in obj) {}
and store key and obj[key] in innerHTML to see a result.
Complete JavaScript file:
function request() {
var hr = new XMLHttpRequest();
hr.onreadystatechange = function() {
if (hr.readyState == 4 && hr.status == 200) {
var data = JSON.parse(hr.responseText); // object
var results = document.getElementById("results");
results.innerHTML = "";
for(var key in data) {
results.innerHTML += key + " " + data[key] + "<br>";
}
}
}
hr.open("GET", "mylist.json", true);
hr.send();
results.innerHTML = "requesting...";
}
request();
(Please change the title of your question. Be specific!
How to ask)

How to add auto-refresh to this code?

My name is John. (Yes I know very useful information :)) I'm create a new statistics in php and my Javascript code look like
var req;
function hide() {
for(var i=0; i<arguments.length; i++) {
element = document.getElementById(arguments[i]);
if (element) {
element.style.visibility = 'hidden';
}
}
}
function show() {
for(var i=0; i<arguments.length; i++) {
element = document.getElementById(arguments[i]);
if (element) {
element.style.visibility = 'visible';
}
}
}
function loadXMLDoc(url) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
hide('lastposts');
show('lastposts_update');
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
hide('lastposts');
show('lastposts_update');
}
}
}
function processReqChange() {
if (req.readyState == 4) {
element = document.getElementById('lastposts_text');
if (element) {
if (req.status == 200) {
element.innerHTML = req.responseText;
} else {
element.innerHTML = "Error " + req.status + "<br />" + req.statusText;
}
}
hide('lastposts_update');
show('lastposts');
} else {
var status_message = new Array(
"The query is not initialized",
"The query is created",
"The query is sent",
"The query is processed"
);
element_status = document.getElementById('status');
if (element_status) {
element_status.innerHTML = status_message[req.readyState];
}
}
}
and HTML output
<div id="lastposts_update" style="visibility: hidden;">
<img src="images/refresh.gif" alt="wait">
<span id="status"></span>
</div>
<div id="lastposts" style="z-index: 2;">
<a href="" onclick="loadXMLDoc('{URL}'); return false;">
<img src="images/refresh.gif" alt="refresh" border="0"></a>
<span id="lastposts_text">
{IMPORT_NEW_STATISTICS}
</span>
</div>
How modified this code and add auto-refreshing and remove manual refresh?
Can you help me? I'll be very grateful
Here is the similar QA Auto refresh code in HTML using meta tags
try to put the following code
<meta http-equiv="refresh" content="5">
into HTML header tag.

cascading drop down with XML, javascript having problems

Here is my code. I am trying to create a cascading DropDown box in html with javascript and XML, and I am almost close to the end, but I just can't get this to work, can someone close this for me?
my script
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<EMPLOYEES xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<RECORD>
<DEPARTMENT>Operations</DEPARTMENT>
<DESIGNATION>Assistant Manager</DESIGNATION>
<NAME>Abhijit Khamkar</NAME>
<SUPERVISOR>Vamsee Nidiganti</SUPERVISOR>
<CTC>5541601.5100909</CTC>
</RECORD>
<RECORD>
<DEPARTMENT>Operations</DEPARTMENT>
<DESIGNATION>Team Leader</DESIGNATION>
<NAME>Elish Anand</NAME>
<SUPERVISOR>Abhijit Khamkar</SUPERVISOR>
<CTC>4356182.71368286</CTC>
</RECORD>
</EMPLOYEES>
My HTML
<html>
<head>
<meta charset="utf-8"/>
<title>Attendance Drop Down</title>
</head>
<body>
<div id="update" ></div>
<script>
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET','Employee.xml')
request.onreadystatechange = function() {
if((request.readyState===4) &&
(request.status===200)) {
var items = request.responseXML.getElementsByTagName('DEPARTMENT');
var output = '<select id="departments" onchange="update();">';
for (var i = 0; i < items.length; i++) {
output += '<option>' +
items[i].firstChild.nodeValue +'</option>';
}
output += '</select>';
document.getElementById('update').innerHTML = output;
}
}
function update(){
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET','Employee.xml')
request.onreadystatechange = function() {
if((request.readyState===4) &&
(request.status===200)) {
var items = request.responseXML.getElementsByTagName('DESIGNATION');
var output = '<select id="designations">';
for (var i = 0; i < items.length; i++) {
output += '<option>' +
items[i].firstChild.nodeValue +'</option>';
}
output += '</select>';
document.getElementById('update').innerHTML = output;
}
}
}
request.send();
</script>
</body>
</html>
You need to add:
request.send();
Inside your update function, the one you have is outside and used to do the initial call but won't get called when your update function is invoked.
<html>
<head>
<meta charset="utf-8"/>
<title>Attendance Drop Down</title>
</head>
<body>
<div id="update" ></div>
<script>
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET','Employee.xml')
request.onreadystatechange = function() {
if((request.readyState===4) &&
(request.status===200)) {
var items = request.responseXML.getElementsByTagName('DEPARTMENT');
var output = '<select id="departments" onchange="update();">';
for (var i = 0; i < items.length; i++) {
output += '<option>' +
items[i].firstChild.nodeValue +'</option>';
}
output += '</select>';
document.getElementById('update').innerHTML = output;
}
}
request.send();
function update(){
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET','Employee.xml')
request.onreadystatechange = function() {
if((request.readyState===4) &&
(request.status===200)) {
var items = request.responseXML.getElementsByTagName('DESIGNATION');
var output = '<select id="designations">';
for (var i = 0; i < items.length; i++) {
output += '<option>' +
items[i].firstChild.nodeValue +'</option>';
}
output += '</select>';
document.getElementById('update').innerHTML = output;
}
}
request.send();
}
</script>
</body>

Categories