我已收到来自美国人口普查 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);
})
})
最佳答案
不要使用文本输入来表示状态，而是使用 <select>落下。您可以在每个<option>中指定您希望每个状态映射到的确切值。 html，然后将其映射到 API。
<select id="stateSelect">
<option value="01">Alabama</option>
...
</select>
$('#stateSelect').val()
关于javascript - 从 API 收到的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34347271/