Avatar of gudii9
gudii9
Flag for United States of America asked on

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
HTMLJavaScriptjQueryAJAXJSON

Avatar of undefined
Last Comment
gudii9

8/22/2022 - Mon
slightwv (䄆 Netminder)

>>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);
SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
gudii9

ASKER
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
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
gudii9

ASKER
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
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
slightwv (䄆 Netminder)

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.
gudii9

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

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
gudii9

ASKER
let me try