title: Returning list from ajax and creating a list on the jsp page
body: <p>I am trying to show the user with a list of things when the page loads.
  when the page loads I do and AJAX call to the database and return a list of DTOs. In the controller I set the list of DTOs into the model and on the JSP page I try to access the list value through  loop of JSTL.</p>
  
  <p>here is my code</p>
  
  <p>ajax --></p>
  
  <pre><code> $(document).ready(function() {
  
  $.ajax({    
      url : 'loadInterests',
      dataType : "json",
      type : "GET",
      success: function (response) 
      {
          }
        ,
    error: function (response) 
      {   
        }
  
  });
  });
  </code></pre>
  
  <p>contoller --> </p>
  
  <pre><code>    @RequestMapping(value="/loadInterests", method = RequestMethod.GET)
  public List&lt;InterestsDto&gt; loadInterests( Model model1)
  {
      String Email = ((UserDetailsDto)SecurityContextHolder.getContext().getAuthentication().getPrincipal()).getUsername();
      long id = ((UserDetailsDto)SecurityContextHolder.getContext().getAuthentication().getPrincipal()).getId();
      System.out.println(" " +Email+ "     kkk   " +id);
      List&lt;InterestsDto&gt; interests = userService.loadInterests(Email ,id);
      System.out.println("controller out ");
      for(int i =0 ; i &lt; interests.size(); i++)
      {
          System.out.println( "id == " +interests.get(i).getName());
          System.out.println( "value == " +interests.get(i).getId());
      }
  
      model1.addAttribute("interests", interests);
      return interests;
  }
  </code></pre>
  
  <p>jsp --></p>
  
  <pre><code>&lt;div class="talentBoxMain"&gt;
             &lt;c:forEach var="i" begin="0" end="${interests.size()}" items="${interests}"&gt;
                            &lt;br&gt;
                              &lt;div class="talentBox10 addTalentBox"&gt;
                                  &lt;div class="media"&gt; &lt;a href="#" class="pull-left"&gt;
                                       &lt;img alt="..." src="resources/img/talent-singing.jpg" class="media-object img-rounded"&gt;&lt;/a&gt;
                                      &lt;div class="media-body"&gt;
                                          &lt;h5 class="pull-left"&gt;&lt;a href="#"&gt;&lt;c:out value="${i}"/&gt;${i.getName()}&lt;/a&gt;&lt;/h5&gt;
                                          &lt;a class="btn btn-info btn-sm pull-right addBtn" href="#"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; Add&lt;/a&gt; &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                           &lt;/c:forEach&gt;
  </code></pre>
  
  <p>the code does not work. Every Time i try to load the page it throws an exception of NullPointerException type.</p>
  
  <p>java.io.IOException: JspException when evaluating the body</p>
  
  <p>Please help.</p>