html table fro json

hi,

i am trying below

https://www.w3schools.com/js/tryit.asp?filename=tryjson_html_table

where the html table data coming from

i am not clear on what below code doing either


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


what is dbparam why we need to stringify json and send that

dbParam = JSON.stringify(obj);

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.

slightwv (䄆 Netminder) Commented:
>>why we need to stringify json and send that
https://www.w3schools.com/js/js_json_stringify.asp

>>what is dbparam
It holds the string value that will eventually be passed in to json_demo_db_post.php:
xmlhttp.send("x=" + dbParam);
Julian HansenCommented:
This seems to be a duplicate of another question - see response here https://www.experts-exchange.com/questions/29070743/dynamic-html-table-from-json.html#a42384772

In addition - the code is requesting data from the server using AJAX and using the returned data to dynamically build a table and add it to the web page.
gudii9Author Commented:
how to run this code locally?

i am not seeing data populated when i run this

other question is on dynamic html table
this question just regular table

what is the difference between dynamic and regular html tables?
please advise
Determine the Perfect Price for Your 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 with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Get Your eBook
slightwv (䄆 Netminder) Commented:
>>how to run this code locally?

You'll need the PHP file the Javacript references and a PHP webserver installed once you get it.

Otherwise, you'll need to port the PHP code to whatever web server you have running.

>>what is the difference between dynamic and regular tables?

I'm not sure I understand the question.  I would guess a "regular" table is an HTML table with hard-coded static values where a dynamic one is built at runtime.

<TABLE>
<TR><TD>I'm a static table</TD></TR>
</TABLE>

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
gudii9Author Commented:
You'll need the PHP file the Javacript references and a PHP webserver installed once you get it.
can i do using java? i did not work much with PHP
slightwv (䄆 Netminder) Commented:
You can do whatever you want with whatever web technology you want.

If you want to run the code from the sample as-is, you need PHP since it calls a PHP file:  xmlhttp.open("POST", "json_demo_db_post.php", true);

You can use the javascript provided and call whatever web page you create as long as it does the same thing as the sample from w3schools.com.
gudii9Author Commented: 
<!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":"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

how to tweak my code to make it work.

i am running above html in C drive of my windows laptop

so paste below data file saved as .php or .js?

how to point that local path ?
if both html and .php same location it should automatically pick right?
slightwv (䄆 Netminder) Commented:
You need to set up your computer as a web server.  You cannot just copy php/aspx/jsp/??? code and run it without the correct web server that knows how to interpret the corresponding files.

The code you posted is just the HTML file with the JSON javascript.  You need to find the json_demo_db_post.php file on the w3schools website.  Then it gets back to what I posted above:  You need a PHP web server before you can run it.

If you don't want to run PHP and want to run some other web server, you'll need to port the json_demo_db_post.php into whatever language your web server handles.

For Windows it is IIS as your web server and typically .Net code.
gudii9Author Commented:
let me try
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
HTML

From novice to tech pro — start learning today.