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
LVL 7
gudii9Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ste5anSenior DeveloperCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
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.
0
gudii9Author Commented:
how to run this code locally?

i am not seeing data populated when i run this  example locally?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
What do you mean by "run this example locally"
0
gudii9Author 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

0
Julian HansenCommented:
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.
0
gudii9Author Commented:
i am java guy can i use tomcat?
0
Julian HansenCommented:
For the server side service - yes you can use anything that will understand an HTTP Request and is capable of returning a response.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.