How to group records when rendering in HTML

Question

I have a set of records which are fetch from a backend and returned grouped by Category using a javascript code.

Actually those records are simply render in HTML by string concatenation as below :

knowledge KB number 1 - Short description - Categor1 knowledge KB number 2 - Short description - Categor2 knowledge KB number 3 - Short description - Categor1 knowledge KB number 4 - Short description - Categor5 knowledge KB number 5 - Short description - Category6 knowledge KB number 6 - Short description - Category7 knowledge KB number 7 - Short description - Category5

What I am trying to represent is the set of record above render in HTML as below :

Category1 : knowledge KB number 1 - Short description knowledge KB number 3 - Short description

Category 2: knowledge KB number 2 - Short description

Category 5: knowledge KB number 4 - Short description knowledge KB number 7 - Short description

Category 6: knowledge KB number 5 - Short description

Category 7: knowledge KB number 6 - Short description

How can I render my HTML in order that the Category is repeated only once per group

Here is below the sample code which represent them in concatained string :

GlideRecordSecure('u_kb_template_sharepoint_document');
                                               kb.addQuery('cmdb_ci',current.sys_id);
                                               kb.addQuery('latest',true);
                                               kb.orderBy('kb_category');
                                               kb.query();
                                               "/>

<j2:if test="$[kb.next()]" >
    <tr>
        <td class="label label_spacing">
            <span style="margin-right:3px; margin-left:1px;">$[SP]</span>
            ${gs.getMessage('Attached knowledge:')}
        </td>
        <td>
            <g2:evaluate>
                var hasMore = true;
                var category = kb.getDisplayValue('kb_category');
            </g2:evaluate>
            <j2:while test="$[hasMore]">
                <div>
                    <img src="images/nav_bult.gifx" alt="${gs.getMessage('Knowledge Base Article')}" />
                    <a class="obvious" target="_blank" href="$[kb.u_kb_url]">$[HTML:kb.number] - $[HTML:kb.short_description] - $[category]</a>
                </div>
                <g2:evaluate>
                    hasMore = kb.next();
                </g2:evaluate>
            </j2:while>
        </td>
    </tr>
</j2:if>

How can I update it to be grouped, did not find out ?

Note this script is part of Jelly element from ServiceNow

thanks

Answer 1

First of all, this isn't really an HTML issue, although you need to think of course how you want to visually represent this. I.e., the result will be a table with dynamic entries.

Now on the main question - 'How to show category only once' - you will need to do something like this in javascript (pseudo-code) - assume 'records' is an array containing those 7 records.

• records.sort(by category) --> assuming the strings are not yet concatenated, and you can access category as single variable
• records.foreach(item){ compare previous item to current item if different create new HTML line, print category (otherwise stay in same line) if categories are same, just append the string previousitem = item }

--> So you sort your data by 'category', thus they are grouped next to each in the data. Then can compare each record with the next one so you can put the right logic for generating the respective HTML.