title: Access a specific object in an arraylist at runtime in javascript
body: <p>I am passing an arraylist from controller to this homepage.jsp. I am displaying the values using jstl tags.</p>
  
  <pre><code>&lt;c:forEach items="${orgList}" var="item"&gt;
  &lt;tr&gt;
   &lt;td&gt;
      &lt;input type="radio" class="rbutton" name="chooseOrg" value="${item.orgId}"&gt;&amp;nbsp&amp;nbsp&amp;nbsp
      &lt;a href="http://localhost:8080/SpringDemo/deptPage/${item.orgId}"&gt;
      &lt;c:out value="${item.orgName}" /&gt;&lt;/a&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;c:out value="${item.orgDesc}" /&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This is the code where I am iterating.It is displaying it perfectly fine. I want these values somewhere else in javascript.This is what i tried so far:</p>
  
  <pre><code>    var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
      var totalFound = radioButtons.length;
      var checkedRadioButton = radioButtons.filter(':checked');
      var selectedIndex = radioButtons.index(checkedRadioButton);
  </code></pre>
  
  <p>selectedindex gives me right index of the for the arraylist.I checked it using alerts.However the alert below always gives the first value in the arrayList orgList.           </p>
  
  <pre><code>    alert("${orgList.get(selectedIndex).orgName}");
      $("#updateName").val("${orgList.get(selectedIndex).orgName}"); 
  </code></pre>
  
  <p>My motive is to take the selectedIndex and get correspoding orgname from the arralist orgList and set it for the input field with id "updateName".Looking forward to help. </p>
  
  <p>The entire code for reference is : </p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  
  &lt;style&gt;
  html,body {
      width: 100%;
  }
  #insertPopUp,#updatePopUp {
      display:none;
  }
  
  &lt;/style&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  
  $(document).ready(function(){
   /*    $("#insertPopUp").hide();    in css its display had to be made none*/
  
  
  
   $("#insert").click(function(){
  
       $("#insertPopUp").dialog({
              autoOpen:false,
              show: 'slide',
              resizable: false,
              position:"relative",
              stack: true,
              height: 'auto',
              width: 'auto',
              modal:true
          }); 
          $("#insertPopUp").dialog("open");
  });
  
  $("#popUpSave").click(function(){
      $.ajax({  
            type : 'POST',  
            url : "http://localhost:8080/SpringDemo/insertOrganization/"
            +"?insertName="+$("#insertName").val()
                    +"&amp;insertDescription="+$("#insertDescription").val(), 
            success : function(){
                $("#insertPopUp").dialog("close");
                window.location.href="http://localhost:8080/SpringDemo/homePage";
            }       
  
        });
  }); 
  
  
  $("#delete").click(function(){  
      //to get the index of the selected option in a radio button group
  
      /* var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
      // this should contain the count of all your radio buttons
      var totalFound = radioButtons.length;
      // this should contain the checked one
      var checkedRadioButton = radioButtons.filter(':checked');
      // this should get the index of the found radio button based on the list of all
      var selectedIndex = radioButtons.index(checkedRadioButton);
      alert(selectedIndex); */
  
  
  
      // to get value of the selected option in a radio button group    
      var orgid = $("#orgDisplayForm input[name='chooseOrg']:checked").val();
      $.ajax({  
          type : 'POST',  
          url : "http://localhost:8080/SpringDemo/deleteOrganization/" +"?orgid="+orgid, 
          success : function(){
            window.location.href="http://localhost:8080/SpringDemo/homePage";
          }         
      }); 
  });
  
  
  $("#update").click(function(){
      debugger;
      var orgid = $("#orgDisplayForm input[name='chooseOrg']:checked").val();
      $("#updatePopUp").dialog({
          autoOpen:false,
          show: 'slide',
          resizable: false,
          position:"relative",
          stack: true,
          height: 'auto',
          width: 'auto',
          modal:true
      }); 
      $("#updatePopUp").dialog("open");
  
      var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
      // this should contain the count of all your radio buttons
      var totalFound = radioButtons.length;
      // this should contain the checked one
      var checkedRadioButton = radioButtons.filter(':checked');
      // this should get the index of the found radio button based on the list of all
      var selectedIndex = radioButtons.index(checkedRadioButton);
      /* alert("${selectedIndex}"); */
      /* var name = ${orgList};
      &lt;c:out value="${colors[0]}"/&gt; */
      /* $("#updateName").text($orgList[selectedIndex].orgName); */
      /* alert("&lt;c:out value="${orgList[0].orgName}"/&gt;");  */
      /* $("#updateName").text("&lt;c:out value="${orgList[0].orgName}"/&gt;");  */
      /* alert("&lt;c:out value="${orgList.get(selectedIndex).orgName}"/&gt;");
      alert("${orgList.get(selectedIndex).orgName}"); */
  
  
      //$("#updateName").val("${orgList.get(selectedIndex)}"); 
      $("#updateName").val("${orgList.get(selectedIndex)}");
  
  
      &lt;%-- alert("${orgList.get(2).orgName}");
      $("#updateName").text(&lt;%=${orgList.get(i)}%&gt;) --%&gt;; 
  
  
  
      /* $("#updateDescription").text(${orgList[selectedIndex].orgDesc}); */
  
  });
  
  $("#popUpUpdate").click(function(){
  
  
      var orgid = $("#orgDisplayForm input[name='chooseOrg']:checked").val();
      $.ajax({  
            type : 'POST',  
            url : "http://localhost:8080/SpringDemo/updateOrganization/"
            +"?updateName="+$("#updateName").val()
                    +"&amp;updateDescription="+$("#updateDescription").val()
                    +"&amp;orgid="+orgid, 
            success : function(){
                $("#updatePopUp").dialog("close");
                window.location.href="http://localhost:8080/SpringDemo/homePage";
            }       
  
        });
  });
  
  });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
       &lt;form:form id="orgDisplayForm"&gt;
          &lt;table align="center" width="60%"&gt;
              &lt;col width="30%"&gt;
              &lt;col width="30%"&gt;
              &lt;tr&gt;
                  &lt;th align="left"&gt;Organization Name&lt;/th&gt;
                  &lt;th align="left"&gt;Description&lt;/th&gt;
              &lt;/tr&gt;
  
              &lt;c:forEach items="${orgList}" var="item"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                      &lt;input type="radio" class="rbutton" name="chooseOrg" value="${item.orgId}"&gt;
  
                      &amp;nbsp&amp;nbsp&amp;nbsp
                      &lt;%-- &lt;a  id ="deptAnchor" onclick=clickOrg(${item.orgId}) href="http://localhost:8080/SpringDemo/deptPage/"+${item.orgId}&gt; --%&gt;
  
                      &lt;a href="http://localhost:8080/SpringDemo/deptPage/${item.orgId}"&gt;
                      &lt;c:out value="${item.orgName}" /&gt;&lt;/a&gt;
                      &lt;/td&gt;
                      &lt;td&gt;&lt;c:out value="${item.orgDesc}" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/c:forEach&gt;
              &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
  
               &lt;td&gt;&lt;button type="button" id="insert"&gt;Insert&lt;/button&gt;&amp;nbsp&amp;nbsp&amp;nbsp&lt;button type="button" id= "update"&gt;Update&lt;/button&gt;&amp;nbsp&amp;nbsp&amp;nbsp&lt;button type="button" id="delete"&gt;Delete&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;div id="insertPopUp"&gt;
          &lt;form:form method="POST" action="/insertOrganization"&gt;
          &lt;p&gt;&lt;label for="name"&gt;Organization name&lt;/label&gt;&lt;p&gt;&lt;input type="text" name="name" id="insertName" /&gt;&lt;/p&gt;&lt;/p&gt;
          &lt;p&gt;&lt;label for="description"&gt;Organization description&lt;/label&gt;&lt;p&gt;&lt;input type="text" name="description" id="insertDescription" /&gt;&lt;/p&gt;&lt;/p&gt;
          &lt;button type="submit" id="popUpSave"&gt;Save&lt;/button&gt;      
          &lt;/form:form&gt;
          &lt;/div&gt;
  
  
          &lt;div id="updatePopUp"&gt;
          &lt;p&gt;&lt;label for="name"&gt;Organization name&lt;/label&gt;&lt;p&gt;&lt;input type="text" name="name" id="updateName" /&gt;&lt;/p&gt;&lt;/p&gt;
          &lt;p&gt;&lt;label for="description"&gt;Organization description&lt;/label&gt;&lt;p&gt;&lt;input type="text" name="description" id="updateDescription" /&gt;&lt;/p&gt;&lt;/p&gt;
          &lt;button type="submit" id="popUpUpdate"&gt;Update&lt;/button&gt;      
          &lt;/div&gt;
  
  
      &lt;/form:form&gt; 
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>