How To Make table based on the value of dropdown Menu In JS

admin_img Posted By Bajarangi soft , Posted On 08-10-2020

JSON can very easily be translated into JavaScript. JavaScript can be used to make HTML table based on drop down menu value in your web pages. so today we discuss how to create table for json data through java script

How To Make table based on the value of dropdown Menu In JS

Dynamic HTML Table
Let's Learn

Step 1:

Create Index.php file and implement code as below

<select id="myselect" class="form-control" onchange="change_myselect(this.value)">
    <option value="">Choose an option:</option>
    <option value="orders">orders</option>
    <option value="products">Products</option>
    <option value="users">users</option>
</select>
<h2 id="demo"></h2>


Step 2:
Create json_demo_db_post.php file and implement code as below.

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);
$conn = new mysqli("localhost", "root", "", "farm_site");


if($obj->table == 'orders')
{
    $stmt = $conn->prepare("SELECT name FROM orders LIMIT ?");
    $stmt->bind_param("s", $obj->limit);
    $stmt->execute();
    $result = $stmt->get_result();
}
if($obj->table == 'products')
{
    $stmt = $conn->prepare("SELECT name FROM products LIMIT ?");
    $stmt->bind_param("s", $obj->limit);
    $stmt->execute();
    $result = $stmt->get_result();
}
if($obj->table == 'users')
{
    $stmt = $conn->prepare("SELECT name FROM users LIMIT ?");
    $stmt->bind_param("s", $obj->limit);
    $stmt->execute();
    $result = $stmt->get_result();
}

$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>


Step 3:
Now we implement java script to create table based on dropdown menu and get data from database from php file.

<script>
    function change_myselect(sel) {
        var obj, dbParam, xmlhttp, myObj, x, txt = "";
        obj = { table: sel, limit: 5 };
        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' class='table'>"
                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>


Complete Code For Making  table based on the value of dropdown Menu In JS

<!DOCTYPE html>
<html>
<head>
    <title>How To Make An HTML Table For JSON Data Using JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: tomato">How To Make An HTML Table For JSON Data Using JavaScript</h1>
    </div>
    <br><br><br>
    <div class="well">
        <select id="myselect" class="form-control" onchange="change_myselect(this.value)">
            <option value="">Choose an option:</option>
            <option value="orders">orders</option>
            <option value="products">Products</option>
            <option value="users">users</option>
        </select>
        <h2 id="demo"></h2>
    </div>

    <script>
        function change_myselect(sel) {
            var obj, dbParam, xmlhttp, myObj, x, txt = "";
            obj = { table: sel, limit: 5 };
            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' class='table'>"
                    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.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("x=" + dbParam);
        }
    </script>
</div>
</body>
</html>

 

Related Post