title: Elegant way for populating data in AlloyUI Data Table using JSP
body: <p>I'm developing a <code>portlet</code> for a <code>Liferay</code> portal. I'm trying to use <code>AlloyUI</code> <code>Data Table</code> and my code is currently working, but they way in which I fear that I'm doing it in not an elegant and easy to maitain way. </p>
  
  <p>Below is code from my <code>View.jsp</code>:</p>
  
  <pre><code>&lt;%@page import="java.util.ArrayList"%&gt;
  &lt;%@page import="com.mypackage.model.hpuc.Unit"%&gt;
  &lt;%@page import="java.util.List"%&gt;
  &lt;%@page import="javax.portlet.PortletPreferences"%&gt;
  &lt;%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%&gt;
  
  &lt;portlet:defineObjects /&gt;
  
  This is the &lt;b&gt;Units Folder&lt;/b&gt; portlet in View mode.
  
  &lt;%
      List&lt;Unit&gt; hpUnits = 
          (List&lt;Unit&gt;)renderRequest.getAttribute("hpUnits");
  %&gt;
  
  
  &lt;script&gt;
  var data = [
  
  &lt;%//loop through all but last because of the
  //coma that shouldn't be added for the last element
      for (int i = 0; i &lt; hpUnits.size() - 1; i++){ 
          Unit unit = hpUnits.get(i);%&gt;
          { 
              description: '&lt;%=unit.getDescription()%&gt;',
              city: '&lt;%=unit.getContactData().getAddress().getCity()%&gt;', 
              name: '&lt;%=unit.getRegistrationInfo().getName()%&gt;'
          },  
  
  &lt;%} //close for loop 
  
      //add last element
      Unit lastUnit = hpUnits.get(hpUnits.size() -1);%&gt;
  
      {   
          description: '&lt;%= lastUnit.getDescription()%&gt;',
          city: '&lt;%= lastUnit.getContactData().getAddress().getCity()%&gt;',
          name: '&lt;%= lastUnit.getRegistrationInfo().getName() %&gt;'
      }
  ]; //close data2 array
  &lt;/script&gt;
  
  &lt;div id="myDataTable"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  YUI().use(
    'aui-datatable',
    function(Y) {
      var columns = ['name', 'city', 'description'];
  
      new Y.DataTable.Base(
        {
          columnset: columns,
          recordset: data
        }
      ).render('#myDataTable');
    }
  );
  &lt;/script&gt;
  </code></pre>
  
  <p>Problems that I see in this code are following:</p>
  
  <ol>
  <li>Mixing scriplets with javascript code. It might be very confusing if
  code grows bigger.  </li>
  <li>Each label is declared 3 times (two times while
  populating data for table rows, and once for column labels). If one
  of the labels were to be changed, programmer might forgot to change
  it in any of those places.</li>
  </ol>
  
  <p>Do you have any remarks about the way on how I could improve the quality of my code?</p>