MySql - JSON data not showing in html

Question

I'm trying to create a drop down list from a MySql.

The php is successfully fetching the data from the MySql. But my problem is the data is not showing on the drop down list in my HTML page?

json_mysql_data2.php

header("Content-Type: application/json");
require_once("con.php");
$i=0;
$jsonData = array();
foreach ($conn_db->query("SELECT customerID FROM customers WHERE furniture='33' ") as $result){
        $i++;
        $jsonData["article".$i]=$result['customerID'];
    }
echo json_encode($jsonData);

myJS.js

$(document).ready(function(){
    var ddlist = document.getElementById("ddlist");
    var hr = new XMLHttpRequest();
    hr.open("GET", "json_mysql_data2.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var d = JSON.parse(hr.responseText);
            for(var o in d){
                if(d[o].title){
                    ddlist.innerHTML += '</option><option value='+d[o].title+'</option>';
                }
            }
        }
    }
    hr.send("null");
    ddlist.innerHTML = "Loading Customer ID....";
});

html

<script src="myJS.js" type="text/javascript"></script>
</head>
<body>
<div class="dlist">
        Customer ID: 
        <select id='EmpLst' name="dwlist" onchange='document.getElementById("val1").value = this.value;'><option value="">SELECT STUDENT ID</option>
        <div id="ddlist"></div>
        </select>
        </div>

There are certain mistakes like extra </option> also in the dom element you are adding this in a div which is in a select, that's a bad practice although. — Kundan Singh Chouhan
– Kundan Singh Chouhan, Commented Jun 3, 2014 at 3:20

Barmar · Accepted Answer · 2014-06-03 03:53:32Z

2

Your innerHTML is wrong. You have an extra </option> at the beginning, you're missing the closing > of the <option>. You also don't have any text in the option, so the menu items will all be blank.

You also should be appending to the <select> instead of a <div>.

hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var d = JSON.parse(hr.responseText);
        var empList = document.getElementById("EmpList");
        for(var o in d){
            if(d[o].title){
                empList.innerHTML += '<option value="'+d[o].title+'">'+d[o].title+'</option>';
            }
        }
    }
}

edited Jun 3, 2014 at 3:53

answered Jun 3, 2014 at 3:22

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ramzie Over a year ago

thanks. That did not solve the problem. I have doubts if the <div id="ddlist"></div> will actually work inside <select id='EmpLst' name.....

Barmar Over a year ago

Possibly true. Why don't you append to the <select> instead of the <div>?

Ramzie Over a year ago

I have thought about that, but I'm not sure how to get "SELECT STUDENT ID" as the 1st item and also to get onchange='document.getElementById("val1").value = this.value;'><option value="">

Barmar Over a year ago

Since you're concatenating to the inner HTML, all that stuff will be left there.

dann · Accepted Answer · 2014-06-03 03:22:28Z

0

ddlist.innerHTML += '</option><option value='+d[o].title+'</option>';

should be

ddlist.innerHTML += '<option value="'+d[o].title+'">'+d[o].title+'</option>';

answered Jun 3, 2014 at 3:22

dann

8535 silver badges18 bronze badges

Collectives™ on Stack Overflow

MySql - JSON data not showing in html

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related