HIW JS API Example #2

Get a list of indicator descriptions by state.

by HealthIndicators

HTML

<script src="https://rawgit.com/HealthIndicators/js-api/current-release/Content/Scripts/API/Output/hiw-api.min.js"></script>
<div>
    <label for="apiKey">API Key:</label>
    <input id="apiKey" type="text" />
</div>
<div>
    <label for="baseURL">Base URL:</label>
    <input id="baseURL" type="text" />
</div>
<div>
    <label for="states">State:</label>
    <select id="states" type="text">
        <option selected disabled>Select a state...</option>
    </select>
    <button id="runButton">Run Example</button>
</div>

<p><strong>Note:</strong> Select a state to show Indicator Descriptions which contain data for that state.</p>

<ul id="results"></ul>
<div id="loading">Loading, please wait...</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

label {
    display: inline-block;
    width: 200px;
    text-align: right;
}

#loading {
    display: none;
    position: absolute;
    top: 40%;
    left: 25%;
    width: 50%;
    margin: 40px;
    padding: 10px;
    border: 1px solid #666;
    background: linear-gradient(270deg, #1fbb16, #ffffff, #1fbb16);
    background-size: 600% 600%;
    text-align: center;
    animation: loading 3s ease infinite;
}

@keyframes loading { 
    0% {
        background-position: 100% 50%;
    }
    
    100% {
        background-position: 0% 50%;
    }
}

JavaScript

var apiKey_Key = "apiKey";
var baseURL_Key = "baseURL";
var indicatorDescriptionID_Key = "indicatorDescriptionID";
var api = null;
var map = null;

function init() {
    var apiKey = $("#apiKey").val();
    var baseURL = $("#baseURL").val();
    var $states = $("#states");
    
    $("#runButton").attr("disabled", "disabled");
    $("#loading").show("fast");
    $states.empty();
    
    //Create an API instance against which to make your API calls, passing in your API key.
    api = new hiw.API(apiKey, baseURL);

    //Get a list of states.
    hiw.LocaleLevel.filter(new hiw.Filter()
                             .addEqual(hiw.LocaleLevel.Fields.name, "State"),
                             api, function (localeLevels) {
        var localeLevel = localeLevels[0];
        
                                 hiw.Locale.getByLocaleLevelID(localeLevel.id, api, function (locales) {
                                     for (var i = 0; i < locales.length; i++) {
                                         var locale = locales[i];
                                         
                                         $states.append($("<option>")
                                                        .val(locale.id)
                                                        .text(locale.name));
                                     }
                                     
                                     $("#runButton").removeAttr("disabled");
                                     $("#loading").hide("fast");
                                 });
    });
}

function run() {
    var stateID = $("#states").val();
    
    if (stateID != "") {
        var $resultsUL = $("#results");
        
    
        $("#runButton").attr("disabled", "disabled");
        $("#loading").show("fast");
        $resultsUL.empty();
        
        hiw.IndicatorDescriptionLocale.getByLocaleID(stateID, api, function (indicatorDescriptionLocales) {
            var indicatorDescriptionIDs =...