Hello all I am new to Jquery wanted to pull JSON data and show same.Kindly guide where I am doing some mistake.Kindly tell me seeing the code do I need to pass any script src code for javascript or anything I am missing
For HTML
<div class="content">
<h1>Pulling JSON data from an open data API</h1>
Choose:
<select>
<option>80001 Arvada Jefferson</option>
<option>80044 Aurora Arapahoe</option>
<option>80252 Denver Denver</option>
<option>80727 Eckley Yuma</option>
<option>80728 Fleming Logan</option>
<option>80729 Grover Weld</option>
<option>80938 Colorado Springs El Paso</option>
<option>81658 Vail Eagle</option>
</select>
<em>(ZIP City County)</em>
<button>Let's do this thing!</button>
</div>
Javascript(in footer)
____________
<script>
(function ($) {
$('button').on('click', function () {
// remove resultset if this has already been run
$('.content ul').remove();
// add spinner to indicate something is happening
$('<i class="fa fa-refresh fa-spin"/>').appendTo('body');
// get selected zip code from selectbox
var zip = $('select option:selected').text().substring(1, 6);
// make the AJAX request
$.getJSON('http://data.colorado.gov/resource/4ykn-tg5h.json?entitystatus=Good%20Standing&principalzipcode=' + zip, function (data) {
// do all this on success
var items = [],
$ul;
$.each(data, function (key, val) {
//iterate through the returned data and build a list
items.push('<li id="' + key + '"><span class="name">' + val.entityname + '</span><br><span class="addr">' + val.principaladdress1 + '</span> <span class="city">' + val.principalcity + '</span></li>');
});
// if no items were returned then add a message to that effect
if (items.length < 1) {
items.push('<li>No results for this ZIP code, try again!</li>');
}
// remove spinner
$('.fa-spin').remove();
// append list to page
$ul = $('<ul />').appendTo('.content');
//append list items to list
$ul.append(items);
});
});
}(jQuery));
</script>
