title: Display JSP Table using JSTL while iterating multiple objects
body: <p>I am actually still a starter in this java ee stuff, and I have managed to get quite far still..</p>
  
  <p>I will try to explain my problem the simplest way I can so bear with me.. :)</p>
  
  <p>I am using my Servlet "MajTablesController.java" to retrieve object info ( name, ref etc.. ) from multiple objects [ The Goal is to show a Table that gathers all of this information into one object ]</p>
  
  <p>Using the same servlet i Send a List as a Session Attribute named " Resultat " which contains itself list of the different objects mentionned before.</p>
  
  <p>So to sum up, My List Resultat ( which is received by my JSP ) contains 4 ListObjects.</p>
  
  <p>The problem is when creating the table, i need to use multiple  loops in order to retrieve the data from the different objects, no matter how i place the forEach tags, i can't manage to get the table the right way ( see pics ), and I end up either getting all of the info in one line or one column...</p>
  
  <p>To help you visualise more clearly what is happening, here is an example of what i Am getting with this code :</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%&gt;
  &lt;%@ page import="com.estia.tai.UsersBeanModel"%&gt;
  &lt;%@ page import="com.estia.tai.EchantillonBeanModel"%&gt;
  
  &lt;%@ page import="java.sql.*"%&gt;
  &lt;%@ page import="com.estia.tai.BDDConnect"%&gt;
  &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;
  &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;link rel="stylesheet" type="text/css" media="screen"
  href="../css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen"
      href="../css/styles.css"&gt;
      &lt;script src="../js/scripts.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-1.10.2.js"
          type="text/javascript"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet"
          href="https://unpkg.com/bootstrap-table@1.13.4/dist/bootstrap-table.min.css"&gt;
          &lt;script
              src="https://unpkg.com/bootstrap-table@1.13.4/dist/bootstrap-table.min.js"&gt;&lt;/script&gt;
          &lt;head&gt;
          &lt;/head&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div class="table-responsive table-dark" id="preptable"&gt;
  
                      &lt;table class="table table-bordered table-hover text-center"
                          data-toggle="" data-search="false" data-filter-control="true"
                          data-show-export="true" data-click-to-select="true"&gt;
                          &lt;thead&gt;
                              &lt;tr class=""&gt;
                                  &lt;th data-field=id data-filter-control="select"
                                      data-sortable="true"&gt;Id Commande&lt;/th&gt;
                                  &lt;th data-field=echantillons data-filter-control="select"
                                      data-sortable="true"&gt;Echantillons&lt;/th&gt;
                                  &lt;th data-field=conditionnement data-filter-control="select"
                                      data-sortable="true"&gt;Conditionnement&lt;/th&gt;
                                  &lt;th data-field=transporteur data-filter-control="select"
                                      data-sortable="true"&gt;Transporteur&lt;/th&gt;
                                  &lt;th data-field=etat data-filter-control="select"
                                      data-sortable="true"&gt;Etat&lt;/th&gt;
                                  &lt;th data-field=date data-filter-control="select"
                                      data-sortable="true"&gt;Date&lt;/th&gt;
                                  &lt;th data-field=client data-filter-control="select"
                                      data-sortable="true"&gt;Clientss&lt;/th&gt;
                              &lt;/tr&gt;
  
                          &lt;/thead&gt;
  
  
  
  
  
  
  
                          &lt;tbody&gt;
                              &lt;c:forEach items="${Resultat}" var="variable"&gt;
  
                                  &lt;tr&gt;
                                      &lt;td&gt;&lt;a href="../CommandeVueController?id=${variable.id}"&gt;${variable.id}&lt;/a&gt;&lt;/td&gt;
                                      &lt;td&gt;${variable.echantillonRef}&lt;/td&gt;
                                      &lt;td&gt;${variable.conditionnement}&lt;/td&gt;
                                      &lt;td&gt;&lt;a
                                          href="../TransporteurVueController?id=${variable.transporteurId}"&gt;${variable.transporteur}&lt;/a&gt;&lt;/td&gt;
                                      &lt;td&gt;${variable.etat}&lt;/td&gt;
                                      &lt;td&gt;${variable.date}&lt;/td&gt;
                                      &lt;td&gt;${variable.client}&lt;/td&gt;
  
  
  
                                  &lt;/tr&gt;
                              &lt;/c:forEach&gt;
  
  
                          &lt;/tbody&gt;
  
  
                      &lt;/table&gt;
                  &lt;/div&gt;
                  &lt;!--end of .table-responsive--&gt;
  
                  &lt;script&gt;
                      var $table = $('#preptable');
                      $(function() {
                          $('#toolbar').find('select').change(function() {
                              $table.bootstrapTable('refreshOptions', {
                                  exportDataType : $(this).val()
                              });
                          });
                      })
  
                      var trBoldBlue = $("preptable");
  
                      $(trBoldBlue).on("click", "tr", function() {
                          $(this).toggleClass("bold-blue");
                      });
  
                      $(document)
                              .ready(
                                      function() {
                                          td_array = document
                                                  .getElementsByTagName("td");
                                          check_prep = "En preparation";
  
                                          for (i = 0; i &lt; td_array.length; i++) {
  
                                              if (td_array[i].textContent == check_prep) {
                                                  td_array[i].style.backgroundColor = "#FF8C00";
                                              }
                                              ;
                                          }
                                          ;
                                      });
                  &lt;/script&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>TablePrep.jsp What it actually shows :<a href="https://screenshotscdn.firefoxusercontent.com/images/2e48ceaf-3cd6-422a-a21c-b01d215b5d0e.png" rel="nofollow noreferrer">https://screenshotscdn.firefoxusercontent.com/images/2e48ceaf-3cd6-422a-a21c-b01d215b5d0e.png</a></p>
  
  <p>The Goal is to have each item of the lists below have its own Row ( just like a table )</p>
  
  <p>Notice that the prepTable methods ( which gather and coordinate info from other objects ) sends Lists in their getters methods, which explains why we have lists in the table.</p>
  
  <p>!ServletSide </p>
  
  <pre><code>          BDDConnect connexionBDDModele = new BDDConnect();
          Connection connection = connexionBDDModele.getConnexion();
  
      List&lt;PrepTableVueModel&gt; prepTableList = new     ArrayList&lt;PrepTableVueModel&gt;();
      int TransporteurId = 0;
  
  
      if (request.getSession().getAttribute("p") == "p") {
  
  
          PrepTableVueModel prepTable = new PrepTableVueModel();
  
  
  
  
          //request.getSession().setAttribute("commandeResultat", CommandeDAOModel.lireList());
          //request.getSession().setAttribute("echantillonResultat", EchantillonDAOModel.lireListe());
          //request.getSession().setAttribute("conditionnementResultat", ConditionnementDAOModel.lireListe());
          //request.getSession().setAttribute("clientResultat", ClientDAOModel.lireListe());
          //request.getSession().setAttribute("transporteurResultat", TransporteurDAOModel.lireListe());
  
  
          prepTable.addCommande(CommandeDAOModel.lireList());
          for (int i = 0 ; i &lt; CommandeDAOModel.lireList().size(); i++) {
  
              prepTable.addEchantillon(EchantillonDAOModel.lireListeEch(CommandeDAOModel.lireList().get(i).getId()));
  
          }
  
          for (int i = 0 ; i&lt; prepTable.EchantillonList.size(); i++) {
  
              prepTable.addEchantillonRef(EchantillonDAOModel.lireListeEchFinal(prepTable.EchantillonList.get(i)));
  
          }
  
          for (int i =0; i &lt; prepTable.EchantillonListRef.size(); i++) {
  
  
          }
  
          //prepTable.addConditionnement(ConditionnementDAOModel.lireListe());
          //prepTable.addClient(ClientDAOModel.lireListe());
          //prepTable.addTransporteur(TransporteurDAOModel.lireListe());
  
          System.out.println(prepTable.getId() + "id dans le maj ");
          System.out.println(prepTable.getEchantillon() + "ech dans le maj ");
  
  
          prepTableList.add(prepTable);
  
  
          request.getSession().setAttribute("Resultat", prepTableList);
  
          request.getRequestDispatcher("/panel/tableprep.jsp").forward(request, response);
  </code></pre>
  
  <p>I have tried to, Instead of returning Lists of elements from PrepTable, to return individual elements but without success..</p>