title: Using Variables in an API
body: <p>I don't understand what I am doing wrong. Here is a link to a list of variables that I am using from the US Census: <a href="http://api.census.gov/data/2013/pep/natstprc/variables.json" rel="nofollow">http://api.census.gov/data/2013/pep/natstprc/variables.json</a></p>
  
  <p>I do realize that you can already see the name of the state from the drop down, but my ultimate goal is to be able to select a state from the drop down and have the population and population density, along with the state ID value or the state name (I don't care at this point because I am frustrated :( )appear. I was experimenting with state name first before I moved onto pop or pop density.</p>
  
  <p>What am I doing wrong? Debugger didn't really help me too much. The error message that I get is </p>
  
  <blockquote>
    <p>Cannot read property 'label' of undefined</p>
  </blockquote>
  
  <p>In particular, here is the variable that I am using:</p>
  
  <pre><code>variables: {
  STNAME: {
  label: "State name",
  concept: "Selectable Geographies"
  },
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;&lt;/link&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section id="title"&gt;
          &lt;h1&gt;United States Population Search&lt;/h1&gt;
          &lt;hr/&gt;
      &lt;/section&gt;
      &lt;section id="inputArea"&gt;
          &lt;form&gt;
              &lt;select id="inputBox"&gt;
                  &lt;option value="01"&gt;Alabama&lt;/option&gt;
                  &lt;option value="02"&gt;Alaska&lt;/option&gt;
                  &lt;option value="04"&gt;Arizona&lt;/option&gt;
                  &lt;option value="05"&gt;Arkansas&lt;/option&gt;
                  &lt;option value="06"&gt;California&lt;/option&gt;
                  &lt;option value="08"&gt;Colorado&lt;/option&gt;
                  &lt;option value="09"&gt;Connecticut&lt;/option&gt;
                  &lt;option value="10"&gt;Delaware&lt;/option&gt;
                  &lt;option value="11"&gt;District of Columbia&lt;/option&gt;
                  &lt;option value="12"&gt;Florida&lt;/option&gt;
                  &lt;option value="13"&gt;Georgia&lt;/option&gt;
                  &lt;option value="15"&gt;Hawaii&lt;/option&gt;
                  &lt;option value="16"&gt;Idaho&lt;/option&gt;
                  &lt;option value="17"&gt;Illinois&lt;/option&gt;
                  &lt;option value="18"&gt;Indiana&lt;/option&gt;
                  &lt;option value="19"&gt;Iowa&lt;/option&gt;
                  &lt;option value="20"&gt;Kansas&lt;/option&gt;
                  &lt;option value="21"&gt;Kentucky&lt;/option&gt;
                  &lt;option value="22"&gt;Louisiana&lt;/option&gt;
                  &lt;option value="23"&gt;Maine&lt;/option&gt;
                  &lt;option value="24"&gt;Maryland&lt;/option&gt;
                  &lt;option value="25"&gt;Massachusetts&lt;/option&gt;
                  &lt;option value="26"&gt;Michigan&lt;/option&gt;
                  &lt;option value="27"&gt;Minnesota&lt;/option&gt;
                  &lt;option value="28"&gt;Mississippi&lt;/option&gt;
                  &lt;option value="29"&gt;Missouri&lt;/option&gt;
                  &lt;option value="30"&gt;Montana&lt;/option&gt;
                  &lt;option value="31"&gt;Nebraska&lt;/option&gt;
                  &lt;option value="32"&gt;Nevada&lt;/option&gt;
                  &lt;option value="33"&gt;New Hampshire&lt;/option&gt;
                  &lt;option value="34"&gt;New Jersey&lt;/option&gt;
                  &lt;option value="35"&gt;New Mexico&lt;/option&gt;
                  &lt;option value="36"&gt;New York&lt;/option&gt;
                  &lt;option value="37"&gt;North Carolina&lt;/option&gt;
                  &lt;option value="38"&gt;North Dakota&lt;/option&gt;
                  &lt;option value="39"&gt;Ohio&lt;/option&gt;
                  &lt;option value="40"&gt;Oklahoma&lt;/option&gt;
                  &lt;option value="41"&gt;Oregon&lt;/option&gt;
                  &lt;option value="42"&gt;Pennsylvania&lt;/option&gt;
                  &lt;option value="44"&gt;Rhode Island&lt;/option&gt;
                  &lt;option value="45"&gt;South Carolina&lt;/option&gt;
                  &lt;option value="46"&gt;South Dakota&lt;/option&gt;
                  &lt;option value="47"&gt;Tennessee&lt;/option&gt;
                  &lt;option value="48"&gt;Texas&lt;/option&gt;
                  &lt;option value="49"&gt;Utah&lt;/option&gt;
                  &lt;option value="50"&gt;Vermont&lt;/option&gt;
                  &lt;option value="51"&gt;Virginia&lt;/option&gt;
                  &lt;option value="53"&gt;Washington&lt;/option&gt;
                  &lt;option value="54"&gt;West Virginia&lt;/option&gt;
                  &lt;option value="55"&gt;Wisconsin&lt;/option&gt;
                  &lt;option value="56"&gt;Wyoming&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type="submit" class="searchButton"  value="Search"/&gt;
              &lt;hr/&gt;
          &lt;/form&gt;
      &lt;/section&gt;
      &lt;section class="searchResults"&gt;
          &lt;div class="hiddenTemplates"&gt;
              &lt;dl class="stateInformation"&gt;
                  &lt;dt&gt;&lt;u&gt;State ID Value:&lt;/u&gt;&lt;/dt&gt;
                      &lt;dd class="stateName"&gt;&lt;/dd&gt;
                  &lt;dt&gt;&lt;u&gt;Population Amount:&lt;/u&gt;&lt;/dt&gt;
                      &lt;dd class="statePopulation"&gt;&lt;/dd&gt;
                  &lt;dt&gt;&lt;u&gt;Population Density:&lt;/u&gt;&lt;/dt&gt;
                      &lt;dd class="statePopulationDensity"&gt;&lt;/dd&gt;
              &lt;/dl&gt;
              &lt;div class="errorMessage"&gt;
                  &lt;p&gt;&lt;b&gt;Error Message: Something has gone wrong, try your search again.&lt;/b&gt;&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript/jQuery:</p>
  
  <pre><code>var data = { "variables": {
  "for": {
    "label": "Census API FIPS 'for' clause",
    "concept": "Census API Geography Specification",
    "predicateType": "fips-for",
    "predicateOnly": true
  },
  "in": {
    "label": "Census API FIPS 'in' clause",
    "concept": "Census API Geography Specification",
    "predicateType": "fips-in",
    "predicateOnly": true
  },
  "STATE": {
    "label": "Total for US",
    "concept": "Selectable Geographies"
  },
  "NIM": {
    "label": "Net International Migration",
    "concept": "Estimate Variables",
    "predicateType": "int"
  },
  "STNAME": {
    "label": "State name",
    "concept": "Selectable Geographies"
  },
  "POP": {
    "label": "Resident population total",
    "concept": "Estimate Variables",
    "predicateType": "int"
  },
  "SUMLEV": {
    "label": "Geographic Summary Level",
    "concept": "Selectable Geographies"
  },
  "RESIDUAL": {
    "label": "Final residual for total pop",
    "concept": "Estimate Variables",
    "predicateType": "int"
  },
  "DIVISION": {
    "label": "Census Division Code",
    "concept": "Geographic Characteristics"
  },
  "DOM": {
    "label": "Net Domestic Migration of total Pop",
    "concept": "Estimate Variables",
    "predicateType": "int"
  },
  "DENSITY": {
    "label": "Population Density",
    "concept": "Estimate Variables",
    "predicateType": "int"
  },
  "BIRTHS": {
    "label": "Total Births",
    "concept": "Estimate Variables",
    "predicateType": "int"
  },
  "DATE": {
    "label": "Estimate Date",
    "concept": "Estimate Variables",
    "required": true,
    "predicateType": "int"
  },
  "REGION": {
    "label": "Census Region Code",
    "concept": "Geographic Characteristics"
  },
  "DEATHS": {
    "label": "Total Deaths",
    "concept": "Estimate Variables",
    "predicateType": "int"
  }
   }
  };
  
  
  //This function fills in the result,
  //in our results box, this will give us the name of the US State
  var showStateInformation = function(data){
  
      //var myTest = data.variables.STNAME;
      var label = data.variables.STNAME.label;
  
      //Puts the name of the state into the state name area
      //var nameOfState = $('.stateName');
      //nameOfState.text(stateSearch);
      //var result = $('.searchResults . hiddenTemplates .stateInformation');
      var nameOfState = $('.stateName');
      nameOfState.text(label);
      //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 = '&lt;p&gt;' + error + '&lt;/p&gt;';
          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 the key publicly 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 variables = $('#inputBox').val();
          showStateInformation(variables);
      })*/
      .done(showStateInformation)
  
      //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);
  
      })
  })
  </code></pre>