Grouping rows based on the value in it in HTML

Question

I have a jsp page with below for loop:

<c:forEach var="myItem" items="${itemsList}">

<table border="0" class="table_class">

        <tr>

            <td colspan="1" valign="bottom">Item #${myItem.item_number}
            </td>

            <td colspan="2" align="left"><b>Item Name : ${myItem.item_name}</b> 
            </td>


        </tr>

        <tr>
            <td class="gridcolumnclass">${myItem.item_desc}
            </td>

        </tr>

</table>

</c:forEach>

As clear, for every item, two rows gets published with first row having two columns containing ITEM_NUMBER and ITEM_NAME while the second row containing ITEM_DESCRIPTION.

For e.g., I have below set of items

1, banana, some_desc
2, banana, some_desc
3, apple, some_desc
4, banana, some_desc
5, banana, some_desc
6, apple, some_desc
7, apple, some_desc
8, banana, some_desc
9, apple, some_desc
10, apple, some_desc
11, banana, some_desc

If above list is passed to the for loop, on the display, there will be two bananas, then an apple, then again two bananas, then two apples, then one banana, then two apples and finally a banana in the given order.

However, how could I group apples and bananas together ?

My display should show all bananas first and then apples.

Thanks for reading.

score 0 · Accepted Answer · edited May 23 '17 at 11:56

I guess the set of items is an object (or array). Javascript has the .sort() function which can take a function.

function compare(a,b) {
    if (a.item_name < b.item_name)
        return -1;
    if (a.item_name > b.item_name)
        return 1;
    return 0;
}

myItem.sort(compare);

If you like to take this further and make the compare function dynamic. (So you can sort by another 'field' name) this is a good start ;)

If you can't do the sort with Javascript. Here is a Java based solution. It needs some modification in order to use it in your case though.

Hope this helps.

Grouping rows based on the value in it in HTML

1 Answers1