can not display values of array list in jquery. getting undefined error.

[david007]

i am using ajax and jquery to populate a drop down based on the selected from a previous drop down. i have drop down by name country which has list of all country names. based on the selection in this select, the program will make an ajax call to retrieve the states details from database. i am able to get response from ajax but not able to display data in my jsp page. i am getting the data length correctly. but when i try to access the information it is giving undefined. here is my code

<script type="text/javascript">
    function loadStates(){
        var country_value = $("#country option:selected").val();
        $.getJSON("<c:url value="/states.htm" />",{country_id:country_value}, function(data) { 
          var content="";
          alert("in json"+data.length);
          alert(data[1]);
          for ( var i = 0; i < data.length; i++) {
                  content +="<option value="+data[i].state_id+" label="+data[i].state_name+"/>";
          };
          alert(content);
         $('#state').html(content);
        });
    }
</script>

here is my code in controller.

@RequestMapping(value="/states.htm", method = RequestMethod.GET)
  
  public @ResponseBody List<states> getstates(@RequestParam int country_id) {
       System.out.println("reached states");
       System.out.println("country id is "+country_id);
       List statesList=customerDAO.listStates(country_id);
       return statesList;
  }

[david007]

this is the modified code

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
    function loadStates(){
        var country_value = $("#country option:selected").val();
        $.getJSON("<c:url value="/states.htm" />",{country_id:country_value}, function(data) { 
          var content="";
          for ( var i = 0; i < data.length; i++) {
             content +='<option value="'+data[i].stateId.toString()+'">'+data[i].stateName.toString()+'</option>';
          };
          $("#state").append(content);
        });
    }
</script>