Yahoo Local Search Integration Part 3: Display
In part 2 of my local search series, I briefly went over how the JSON data gets from the server to the client. In this post, I plan to detail how the data from the client gets displayed to the user. JavaScript has capabilities to dynamically render content within the browser, and we'll use those capabilities here. The method that does the work is shown below.
function displayResults(yahooResults, parent) {
while (parent.hasChildNodes())
parent.removeChild(parent.firstChild);
var resultSet = yahooResults.ResultSet;
for (var resultIndex in resultSet.Result) {
var result = resultSet.Result[resultIndex];
var newItem = document.createElement("SPAN");
newItem.innerHTML = result.Title + "<br/>" +
result.Address + "<br/>" +
result.City + "<br/>" +
result.State + "<br/><br/>";
parent.appendChild(newItem);
parent.appendChild(document.createElement("BR"));
}
}
When the web service results come back to the client, the results are passed to the yahooResults parameter. So the yahooLocalSearchResults variable that the YahooProvider defined in the return string (or whatever the actual name was) is passed direclty to this method. This object has a single property, ResultSet, which I pass to a variable reference. This object, now assigned to the resultSet variable, has the following properties:
- Result - an array of the actual results based on the number of results allowed.
- firstResultPosition - The index of the first result
- totalResultsReturned - The number of results returned with the call
- totalResultsAvailable - Total number of records found, but not returned to the client
- resultSetMapUrl - The URL to the map to display these results
Looping through each result gets to the core data, which has a title, address, city, state, latitude, longitude, map URL, business information, destination information, and much more available from the web service. For simplicity, I bring back name and address information, separated by new lines.clef
Every time a search occurs, the results are cleared at the top of the method; every DOM element has a hasChildNodes() method that checks for children. The parent is checked for children in this case, and cleared if there is any. So the search results start afresh every time. The screen can be viewed here: http://www.flickr.com/photos/36885451@N06/3394395353/
The next step is to make it more dynamic, and make it look better.