dynamic html table from json

gudii9
gudii9 used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Senior Developer
Commented:
It does an HTTP request - aka AJAX - using a return function to insert the data into a table.

Just my 2¢: The amount of questions in different web development topics tell me, that you're advancing too fast in your studies. It requires time and playing with those things to get a good grip on it. Just getting some answers here will not really help you. Ya know, teaching fishing vs handing over one.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
This code demonstrates how to do a RAW (using XMLHttpRequest directly) AJAX request.

AJAX is an asynchronous HTTP call that happens in the background while a page is already loaded. We use it to exchange data with a server without the need of a page refresh.

What is happening here
obj = { "table":sel, "limit":20 };

Open in new window

Is we are creating a data object to send to the server. However we cannot send it in its native JavaScript form - the XMLHttpRequest object does not know how to send a memory object over a text based medium - so we need to convert it into a text based format. For that we use JSON (JavaScript Object Notation)
This is a text representation of a JavaScript object
That is what this line is doing
dbParam = JSON.stringify(obj);

Open in new window

On line 36 is where we do the actual send
 xmlhttp.send("x=" + dbParam)

Open in new window

This code is POSTing our stringified (converted to JSON) object as parameter x

On the server the POST is received as a JSON string, it is converted back into a local representation of an Object (according to the scripting language) and processed before optionally sending a response back.

Author

Commented:
how to run this code locally?

i am not seeing data populated when i run this  example locally?
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
What do you mean by "run this example locally"

Author

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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

Author

Commented:
i am java guy can i use tomcat?
Most Valuable Expert 2017
Distinguished Expert 2018

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial