[FIXED] How to Iterate List of JSONObject in Thymeleaf using th:each

Issue

Here is that list of JSONObject which is coming from Spring MVC Controller.

List<JSONObject> jsonDataList =
 
[{"key1":"value1","key2":"value2","key3":"value3","key4":"value4"}, {"key1":"value1","key2":"value2","key3":"value3","key4":"value4"}]

How to Iterate List of JSONObject in Thymeleaf using th:each?

Code IN HTML FILE below:=>

 <tr th:each="data: ${jsonDataList}">   
    <td align="center"><span th:text="${data.key1}"></span></td>   // getting exception here                 
 </tr>

Getting Exception as : Caused by: org.attoparser.ParseException: Exception evaluating SpringEL expression: "data.key1"

Solution

Here is one approach, but it makes some assumptions:

a) Each JSON object has the same number of entries (otherwise you could have a ragged table, containing different numbers of cells in each row).

b) Each JSON object has the same keys in the same order (if you want the table to have consistent column headings).

Also, the sample JSON in the question assumes all values are strings (value1 and so on). If you have different types of objects in your JSON values, then you will need to ensure they have the required string representations (e.g. using toString()).

The approach:

<table>
    <tr> 
        <th:block th:each="heading : ${jsonDataList.get(0).names()}">
            <th th:text="${heading}"></th>
        </th:block>
    </tr>
            
    <tr th:each="item : ${jsonDataList}">
        <th:block th:each="name : ${item.names()}">
            <td th:text="${item.get(name)}"></td>              
        </th:block>
    </tr>
</table>

The first <tr> section handles reading the JSON object keys from the first object in the list:

${jsonDataList.get(0).names()}

The final <tr> section is similar, but uses the keys to look up their related values:

${item.get(name)}

The resulting HTML gives you a simple table:

<table>
    <tr>                 
        <th>key1</th>                
        <th>key2</th>                
        <th>key3</th>                
        <th>key4</th>                
    </tr>            
    <tr>                
        <td>value1</td>                              
        <td>value2</td>                              
        <td>value3</td>                              
        <td>value4</td>                              
    </tr>            
    <tr>                
        <td>value1</td>                              
        <td>value2</td>                              
        <td>value3</td>                              
        <td>value4</td>              
    </tr>
</table>

---

References:

The th:block tag is documented here.

The methods available to be used for JSONObject are documented here.

Answered By - andrewJames
Answer Checked By - David Marino (JavaFixing Volunteer)