TutorialMeta
Ad

Values Received from API

- 1 answer

Ad

I have received the data from the US Census API, but I'm not sure how to convert it into the value I want.

Each state is represented fro 01 to 56. Each number represents a different state. What I want to do is take the value the user entered and convert it into the state from the API.

One solution, which is more complicated and takes much much longer, is to use an if statement. If user enters in 02, state = "Alaska" etc etc. a 56 level nested loop. There has to be a way to get what I need from the API without doing this. Census API ExampleList of Census Variables

Here is my code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/style.css"></link>
</head>
<body>
    <section id="title">
        <h1>United States Population Search</h1>
        <hr/>
    </section>
    <section id="inputArea">
        <form>
            <input type="text" id="inputBox" placeholder="Enter name of state." name="stateInput" autofocus required/>
            <input type="submit" class="searchButton"  value="Search"/>
            <hr/>
        </form>
    </section>
    <section class="searchResults">
        <div class="hiddenTemplates">
            <dl class="stateInformation">
                <dt><u>Name of State:</u></dt>
                    <dd class="stateName"></dd>
                <dt><u>Population Amount:</u></dt>
                    <dd class="statePopulation"></dd>
                <dt><u>Population Density:</u></dt>
                    <dd class="statePopulationDensity"></dd>
            </dl>
            <div class="errorMessage">
                <p><b>Error Message: Something has gone wrong, try your search again.</b></p>
            </div>

        </div>
    </section>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

JavaScript/jQuery:

//This function fills in the result,
//in our results box, this will give us the name of the US State
var showStateInformation = function(stateSearch){

    //Puts the name of the state into the state name area
    var nameOfState = $('.stateName');
    nameOfState.text(stateSearch);
    //in our results box, this will give us the population for that state
    //based on the Census Data
    //var statePopAmount = result.find('.statePopulation');
    //statePopAmount.text(population);
    //in our results box, this will give us the population density for that state
    //based on the Census Data
    //var statePopDensity = result.find('.statePopulationDensity');
    //statePopDensity.text(populationDensity);

}

//The error message
var showError = function(error){
        var errorElem = $('.searchResults .errorMessage');
        var errorText = '<p>' + error + '</p>';
        errorElem.append(errorText);
}

//This function retrieves the said data
//http://www.census.gov/data/developers/data-sets/population-estimates-and-projections.html
//US, State, and PR Total Population and Components of Change

var getStateInformation = function(stateID){
    //the parameters that we need to pass in our request to the US CENSUS API
    var request = {
        "get": "STNAME",
        "DATE": "6",
        "for": "state:" + stateID,

        "key": 'I was told not to post my key code online'
    }

    $.ajax({

        type: "GET",
        data: request,
        url: "http://api.census.gov/data/2013/pep/natstprc",
        dataType: "json",
    })
    //What the function should do if successful
    .done(function(){
        var stateSearch = $('#inputBox').val();
        showStateInformation(stateSearch);
    })

    //What the function should do if it fails
    .fail(function(jqXHR, error){
        var errorElem = showError(error);
    })


}

$(document).ready(function() {

    /*Clicking the Search Button*/
    $('.searchButton').on('click',function(event){
        event.preventDefault();
        var stateID = $('#inputBox').val();
        getStateInformation(stateID);

    })
})
Ad

Answer

Ad

Rather than use a text input for the state, use a <select> dropdown. You can specify the exact value you want each state to map to in each <option> html and then map this to the API.

<select id="stateSelect">
    <option value="01">Alabama</option>
    ...
</select>

$('#stateSelect').val()

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad
Ad