JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

Skip to content
Personal
Open source
Business
Explore
Pricing
Blog
Support
This repository

3
17

    17

leemark/co-data-pull
Code
Issues 0
Pull requests 0
Projects 0
Pulse
Graphs
co-data-pull/index.html
4e59d9a on Apr 5, 2014
@leemark leemark added link to blog post
1345 lines (1344 sloc) 30.6 KB
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Colorado Data Pull Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-desktop-light.min.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Fjalla+One|Cantarell:400,400italic,700italic,700" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div class="content">
        <h1>Pulling JSON data from an open data API</h1>
       <p>The following example will pull and display data from the Colorado Business Entity database. <br>Just choose a ZIP code in Colorado and click the button! <a href="https://github.com/leemark/co-data-pull">See code on github</a>. <a href="http://themarklee.com/2014/04/03/pulling-json-data-open-data-api/">Read the blog post</a>.</p>
            Choose: 
            <select>
            <option>
            80001		Arvada 	Jefferson 	
</option><option>
80002		Arvada 	Jefferson 	
</option><option>
80003		Arvada 	Jefferson 	
</option><option>
80004		Arvada 	Jefferson 	
</option><option>
80005		Arvada 	Jefferson...

JavaScript

(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 AJAX call
        $.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));