不确定为什么我收到此错误消息:未捕获TypeError:无法读取未定义的属性“长度”

时间:2015-12-13 21:27:04

标签: javascript jquery api

我看过This Thread,但我看不出我做错了什么。你们知道为什么我收到此错误消息吗?我以为我将json转换为JavaScript对象?我把这部分搞砸了吗?

这是我的代码:

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的:

$(document).ready(function() {

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

    })  
//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 Spotify's API
    var request = {
        "key": 'da51191f5bc593a52cd303145364967a5deb1adb'
    }

    $.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(result){
        var stateSearch = $('#inputBox').val();
        showStateInformation(stateSearch);
        })

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


}
        //This functionclones the template box and fills in the result

var showStateInformation = function(stateSearch){
    //in our results box, this will give us the name of the US State
    var nameOfState = $('.stateName');
    nameOfState.text = stateSearch;
    console.log(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 = $('.templates .error').clone();
    var errorText = '<p>' + error + '</p>';
    errorElem.append(errorText);
}

})

0 个答案:

没有答案