Cases Data Component Output Order Issue

1

Trying to output some cases data into a table. Using the following code.

{% component viewType: "detail", currentMemberOnly: "false", filterBy: "FormId", filterValue: "11349", filterCondition: "equally", layout: "", limit: "100", type: "cases", collectionVariable: "registrationData" %}

<h2>Registration List</h2>
<div>{{registrationData.items.size}} / 50</div>
<table>
    <thead>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>School</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
        {% for item in registrationData.items %}
        <tr>
            <td>{{item.Fields[2].value}}</td>
            <td>{{item.Fields[1].value}}</td>
            <td>{{item.Fields[3].value}}</td>
            <td>{{item.Fields[4].value}}</td>
        </tr>
    </tbody>
</table>

For some reason, the JSON data output is not in the same order. I currently have 30 entries, and 2 of them are not in the same order, so the data is off. Any Ideas, is there a better way to display this data?

Of the two that are out of order, each has a different sequence of data.
One is First Name, Year, Last Name, School
The other is Phone, Last Name, Email, Confirm.
As you can see, there are other fields than what we are displaying.

2

Hi @Rhatch
Unfortunately, we can’t rely on the ordering of data in Cases. I’m not sure of the reason.
Typically, what I do is conditionally look for each field I need to work with and store the values as variables on each loop.
So in your case, something like this:

<h2>Registration List</h2>
<div>{{registrationData.items.size}} / 50</div>
<table>
    <thead>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>School</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
{% for item in registrationData.items %}

    {% assign firstName = '' %}
    {% assign lastName = '' %}
    {% assign school = '' %}
    {% assign grade = '' %}

    {% for field in item.Fields %}
        {% if field.Alias == 'FirstName' %}
            {% assign firstName = field.value %}
        {% endif %}
        {% if field.Alias == 'LastName' %}
            {% assign lastName = field.value %}
        {% endif %}
        {% if field.Alias == 'School' %}
            {% assign school = field.value %}
        {% endif %}
        {% if field.Alias == 'Grade' %}
            {% assign grade = field.value %}
        {% endif %}
    {% endfor %}

        <tr>
            <td>{{firstName}}</td>
            <td>{{lastName}}</td>
            <td>{{school}}</td>
            <td>{{grade}}</td>
        </tr>

{% endfor %}
    </tbody>
</table>

Note: at the start of the first loop I clear all the variables in case a field is not present for that item, otherwise, the previous item’s value for that field will carry forward.

1 Like
3

@Adam.Wilson Thanks Adam, That’s what I was trying to do but just didn’t have it right. This worked great!

It would be nice to have another component option with a simple JSON that only contains the Name: value pairs for displaying the data, similar to a custom module. I would also think it would save some resources.