I'm having trouble with this search function that I'm working on. I (think I) am passing the contents of an array of objects onto a var contactList and then print that to the webpage. Instead, what I'm getting is:
Here is part the search function of my js file as well as my html.
function doSearch()
{
readCookie();
accessIdForEdit = "";
var lookUp = document.getElementById("searchText").value;
document.getElementById("contactSearchResult").innerHTML = "";
var searchList = "";
var jsonPayload = JSON.stringify({search:lookUp, userId:userId});
var url = urlBase + '/LAMPAPI/search.' + extension;
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/json; charset=UTF-8");
try {
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("contactSearchResult").innerHTML = "Search has been retrieved";
var jsonObject = JSON.parse(xhr.responseText);
for( var i=0; i<jsonObject.results.length; i++ )
{
searchList += jsonObject.results[i];
if( i < jsonObject.results.length - 1 )
{
searchList += "<br />\r\n";
}
}
document.getElementsByTagName("p")[0].innerHTML = searchList;
}
};
xhr.send(jsonPayload);
}
catch(err)
{
document.getElementById("contactSearchResult").innerHTML = err.message;
}
}
<div id = "contactSearchDiv" style = "display: none">
<input type="text" id="searchText" placeholder="Contacts To Search For"/>
<button type="button" id="confirmSearchButton" style="display:block" onclick="doSearch();"> Search </button></br>
<button type="button" id="returnFromSearch" style="display:block" onclick="displayChange('mainPanel', 'contactSearchDiv');">
Return to Page </button><br/>
<span id="contactSearchResult"></span>
<p id="searchList">
</p><br /><br/>
</div>