title: How can I access the list values returned from the controller from ajax?
body: <p>I'm returning a list from my controller. How can I access these list values from AJAX? I get undefined when I make an alert.</p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>@ResponseBody
  @RequestMapping(value="/practice/{category}/option", method = RequestMethod.POST, produces = "application/json; charset=UTF-8")
  public List&lt;Map&lt;String, Object&gt;&gt; practicePageOption(@PathVariable("category") String category, @RequestParam("index") int index, ModelMap model, HttpSession session){
  
      //System.out.println(optionsList.get(index));
      //Result;
      //[{word=abdomen, meaning=karın}, {word=search, meaning=aramak}, {word=fund, meaning=kurmak}, {word=surgeon, meaning=cerrah}, {word=various, meaning=çeşitli}]
      return optionsList.get(index);
  }
  </code></pre>
  
  <p><strong>AJAX:</strong></p>
  
  <pre><code>$('#pass').click(function(event) {
      var inputIndex = $('#index').val();
      $.ajax({
          type: "POST",
          url: "${pageContext.request.contextPath}/practice/${category}",
          async:false,
          data: { index: inputIndex },
          success: function(data){
              $('#label').text(data);
              $.ajax({
                  type: "POST",
                  url: "${pageContext.request.contextPath}/practice/${category}/option",
                  async:false,
                  contentType:"application/json; charset=utf-8",
                  dataType:"json",
                  data: { index: inputIndex },
                  complete: function (data) {
                      //how can use data value
                      $('#optionA').text(data[0]);
                      alert(data[0]);  //undefined
                  }
              });
          }
      });
  });
  </code></pre>