I am facing some challenges in displaying values from the AJAX objects. My goal is to populate a select box with names using AJAX, but I seem to have made an error somewhere in my code. Can someone please assist me in identifying and correcting the mistake? Thank you in advance.
Here is my JavaScript code:
function getClient() {
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var message = xmlhttp.responseText;
var client = JSON.parse(message);
console.log(Object.keys(client));
document.forms["project_form"]["Project_cid"].innerHTML='<select class="form-control" maxlength="100" name="Project[cid]" id="Project_cid"><option value=Select>'+Object.keys(client)+'</option></select>'
}
}
var url = "/pms_pro/index.php/client/list";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(null);
}
When I use alert(message), it displays the following data:
[{"cid":"1","name":"suresh","address":"Chennai"},{"cid":"2","name":"Ramesh","address":"Namakkal"},{"cid":"3","name":"Vignesh","address":"Trichy"}]