Question

我收到了美国人口普查API的数据，但我不确定如何将其转换为我想要的值。

每个状态从01到56表示。每个数字代表不同的状态。我想要做的是获取用户输入的值并将其转换为API中的状态。

一个更复杂且需要更长时间的解决方案是使用if语句。如果用户输入02，state =“Alaska”等等，则为56级嵌套循环。必须有一种方法可以从API获得我需要的东西，而不必这样做。 Census API Example List of Census Variables

这是我的代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" 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);

    })
})

Answer 1

使用<select>下拉菜单，而不是使用状态的文本输入。您可以在每个<option> html中指定希望每个州映射到的确切值，然后将其映射到API。

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

$('#stateSelect').val()

从API收到的值

1 个答案: