Search code examples
javascriptjsonxmlhttprequestcordova-plugins

Using JSON xmlHttprequest to read database from web server and to display the data?

I am new to JSON and phonegap, i am try to develop an application to display the data from webserver but i can't display the data in web-view on the mobile device, i don't know what mistake i made. Here is my main html code: 

<html>
    <head>
        <style>
                h1 {
                    border-bottom: 3px solid #cc9900;
                    color: #996600;
                    font-size: 30px;
                }
                table, th , td  {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
                }
                table tr:nth-child(odd) {
                    background-color: #f1f1f1;
                }
                table tr:nth-child(even) {
                    background-color: #0055cc;
                }
        </style>
    </head>
    <body>
        <div id="id01"></div>
        <script>

                var xmlhttp = new XMLHttpRequest();
                var url = "http://databaseofalrais.site90.net/";

                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        myFunction(xmlhttp.responseText);
                    }
                }
                xmlhttp.open("GET", url, true);
                xmlhttp.send();

                function myFunction(response) {
                    var arr = JSON.parse(response);
                    var i;
                    var out = "<table>";

                    for (i = 0; i < arr.length; i++) {
                        out += "<tr><td>" +
                                arr[i].Name +
                                "</td><td>" +
                                arr[i].Street +
                                "</td><td>" +
                                arr[i].Phone +
                                "</td><td>" +
                                arr[i].Pincode +
                                "</td><td>" +
                                arr[i].Water +
                                "</td><td>" +
                                arr[i].Elec +
                                "</td></tr>";
                    }
                    out += "</table>"
                    document.getElementById("id01").innerHTML = out;
                }
        </script>
    </body>
</html>

My database hosted in the url i mention in the code and here is the php code to access the database and make it as an array.

    header("Access-Control-Allow-Origin: *");
    header("Content-Type: text/html; charset=UTF-8");
    $mysql_host = "mysql3.000webhost.com";
    $mysql_database = "a4217438_data";
    $mysql_user = "a4217438_admin";
    $mysql_password = "admin123";
    $conn = new mysqli($mysql_host, $mysql_user, $mysql_password, $mysql_database);

    $result = $conn->query("SELECT * FROM Propertylist");

    $outp = "[";
    while ($rs = $result->fetch_array(MYSQLI_ASSOC)) {
        if ($outp != "[") {
            $outp .= ",";
        }
        $outp .= '{"Name":"' . $rs["CompanyName"] . '",';
        $outp .= '"Street":"' . $rs["street"] . '",';
        $outp .= '"Phone":"' . $rs["phone"] . '"}';
        $outp .= '"Pincode":"' . $rs["pincode"] . '"}';
        $outp .= '"Water":"' . $rs["water"] . '"}';
        $outp .= '"Elec":"' . $rs["ele"] . '"}';
    }
    $outp .="]";

    $conn->close();

    echo($outp);
Solution

  • If you need to use the data in mobile you have to try json array or xml. Try json_encode($return) to convert the output in array object.

    I give you example try to use it in:

        $result = mysqli_query($con, "SELECT * FROM Propertylist'");

    while ($row = mysqli_fetch_array($result)) {
        $return1['Area'] = $row['CompanyName'];
        $return['result'][] = $return1;
    }

    $return['error'] = 'Yes';

    echo json_encode($return);

    exit;