asked on dynamic html table from json
hi,
i am working on below
https://www.w3schools.com/js/tryit.asp?filename=tryjson_html_table_dynamic
how dynamic html data is coming here?
code does not have data right?
not clear on below code as well
Please advise
i am working on below
https://www.w3schools.com/js/tryit.asp?filename=tryjson_html_table_dynamic
how dynamic html data is coming here?
code does not have data right?
not clear on below code as well
<!DOCTYPE html>
<html>
<body>
<h2>Make a table based on the value of a drop down menu.</h2>
<select id="myselect" onchange="change_myselect(this.value)">
<option value="">Choose an option:</option>
<option value="customers">Customers</option>
<option value="products">Products</option>
<option value="suppliers">Suppliers</option>
</select>
<p id="demo"></p>
<script>
function change_myselect(sel) {
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "table":sel, "limit":20 };
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("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
</script>
</body>
</html>
Please advise
Web DevelopmentHTMLJavaScriptWeb Languages and StandardsJSON
Last Comment
Julian Hansen
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
What do you mean by "run this example locally"
ASKER
<!DOCTYPE html>
<html>
<body>
<h2>HTMLTableBasedOnJSON_8</h2>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "table":"customers", "limit":20 };
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("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
</body>
</html>
please advise
<!DOCTYPE html>
<html>
<body>
<h2>DynamicHTMLTableBasedOnJSON_9</h2>
<select id="myselect" onchange="change_myselect(this.value)">
<option value="">Choose an option:</option>
<option value="customers">Customers</option>
<option value="products">Products</option>
<option value="suppliers">Suppliers</option>
</select>
<p id="demo"></p>
<script>
function change_myselect(sel) {
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "table":sel, "limit":20 };
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("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
</script>
</body>
</html>
Do you understand what AJAX is? You should do some research on this before looking at the examples.
The scripts make AJAX calls to a server PHP script - they won't work unless those scripts exist and return data.
An AJAX request is an asynchronous request made to an external service that happens in the background (in the case of a browser). The server script acts on the request and returns data which a callback in the calling process then uses in whatever way it is meant for the application.
Double clicking the .html file and opening in the browser will not do anything.
To make it work you would need a Web Server that understands PHP
You would then need to create a script called json_demo_db_post.php that returns an array of data that the script can translate into a table.
The scripts make AJAX calls to a server PHP script - they won't work unless those scripts exist and return data.
An AJAX request is an asynchronous request made to an external service that happens in the background (in the case of a browser). The server script acts on the request and returns data which a callback in the calling process then uses in whatever way it is meant for the application.
Double clicking the .html file and opening in the browser will not do anything.
To make it work you would need a Web Server that understands PHP
You would then need to create a script called json_demo_db_post.php that returns an array of data that the script can translate into a table.
ASKER
i am java guy can i use tomcat?
For the server side service - yes you can use anything that will understand an HTTP Request and is capable of returning a response.
i am not seeing data populated when i run this example locally?