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

<!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>

Open in new window

what is dbparam here and other code flow?
Please advise

ASKER CERTIFIED SOLUTION

ste5an

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gudii9

ASKER

how to run this code locally?

i am not seeing data populated when i run this example locally?

Julian Hansen

What do you mean by "run this example locally"

gudii9

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>

Open in new window

when i run above and below i do not see any data coming. i saved these files as .html files on my windows laptop and double clicking the files to open in browser. It opens in browser when i select option like Products etc no data shows up?
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>

Open in new window

Julian Hansen

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.

gudii9

ASKER

i am java guy can i use tomcat?

Julian Hansen

For the server side service - yes you can use anything that will understand an HTTP Request and is capable of returning a response.