YQL create states Dropdown List

OK, a very simple one today.

Using YQL's upcoming.state table, you can create a simple dropdown list to store either the State name or the State Abbreviation.

HTML Page:

Create a select element, and give it an id of ddlStates.

The jQuery Script:

$(function () {
var query = "select code, name from upcoming.state where country_id = 1 and id <= 51";
$.getJSON(
"http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(query) + "&format=json&callback=?",
function (data) {
$.each(data.query.results,
function (index, item) {
for (i = 0; i < item.length; i++) {
var each = item[i];
var stateName = each.name.toUpperCase();
var stateCode = each.code.toUpperCase();
$('<option></option>').val(stateName).html(stateCode).appendTo("#ddlStates");
}
});
});
});

You'll note here I simply changed it to Uppercase, and used the value of State Name, while displaying the state code.

Download Script at: http://www.joshuablackstone.com/Scripts/StatesDropdown.js

And all this time I was storing the data in a database... Ugh...

Using YQL create Food Network Search

More YQL, gotta love how easy they have made this!!

I have found that Food Network can be quite good at making boring foods, well... not so boring. Wondered what it would take to search their system from another webpage. They don't have a feed for you, so what to do? YQL's html table...

Go to the YQL Console, and enter:

select h3 from html where url="http://www.foodnetwork.com/search/delegate.do?fnSearchString=FOODITEM&fnSearchType=site" and
xpath='//div[@class="result-item"]'

as your query. You'll notice it breaks it down to a simple array of h3 elements.
From there, simply create an array and show the results in an unordered list.

HTML Page:

1. Add jQuery to your Page


2. Create a textbox called txtSearch


3. Create a button called btnSearch


4. Create an unordered list called searchResults

JS Code:

function searchRecipes(search) {
$('#searchResults').empty();
$.getJSON(
"http://query.yahooapis.com/v1/public/yql?q=select%20h3%20from%20html(5)%20where%20url%3D%22http%3A%2F%2Fwww.foodnetwork.com%2Fsearch%2Fdelegate.do%3FfnSearchString%3D" + search + "%26fnSearchType%3Dsite%22%20and%0D%0A%20%20%20%20%20%20xpath%3D'%2F%2Fdiv%5B%40class%3D%22result-item%22%5D'&format=json&callback=?",
function (data) {
$.each(data.query.results,
function (index, item) {
for (i = 0; i < item.length; i++) {
var each = item[i];
var link = (each.h3.a.href).replace('/', 'http://www.foodnetwork.com/');
$('<li></li>').html('' + each.h3.a.content + '').appendTo('#searchResults');
}
});
});
}

$("#btnSearch").click(function () {
var searchText = document.getElementById('txtSearch').value;
if (searchText == "") {
alert('You must first enter a food to search!');
}
else {
searchRecipes(searchText);
}
});

There you have it. Enter a food to search in the textbox, click on btnSearch, and a list of recipes are found. Only returns 12, as that is how the site is setup, but its a nice basic example of yql page scraping...

Oh, by the way, if you want a copy of the script, feel free to download at:

http://www.joshuablackstone.com/Scripts/Searches/FoodNetwork.js