Java add to instantiated list depending on condition else instantiate new list

Question

I hope you are great.

I'm sorry about the title but english is not my first language and I wouldn't know how to express my issue better. So basically I have a project where we shall make a project planner, which basically is to divide projects into sub projects and tasks. I'm now working on the sub project part, where I want to display the tasks which has the same subproject ids in a HTML table.
I have a made a SQL query that gathers subprojectname subprojectid and taskname which joins on subprojectid and orders by subprojectid, tasks. Now I want to add this to an ArrayList of SubProjects which constructor has a list of Tasks. Below is my code.

public SubProject(int subProjectID, String subProjectName, ArrayList<Task> tasks){
    this.subProjectName = subProjectName;
    this.subProjectID = subProjectID;
    this.tasks = tasks;
}
public Task(String taskName) {
    this.taskName = taskName;
}

Above is my model classes for tasks and subprojects.

public ArrayList<SubProject> getEntireSubProject(){
    ArrayList<SubProject> listToReturn = new ArrayList<>();
    ArrayList<Task> listOfTask = new ArrayList<>();

    try {
        PreparedStatement ps = connection.establishConnection().prepareStatement("select idsubprojects, subprojectname, taskName \n" +
                "from subprojects \n" +
                "inner join tasks \n" +
                "on subprojects.idsubprojects = tasks.subprojectid\n" +
                "order by idsubprojects, idtasks");

        ResultSet rs = ps.executeQuery();

        int SPIDcompare = -1;
        while (rs.next()){
            if(SPIDcompare == rs.getInt(1)){
                listOfTask.add(new Task(rs.getString(3)));
                listToReturn.add(new SubProject(rs.getInt(1), rs.getString(2), listOfTask));
            }else{
                SPIDcompare = rs.getInt(1);
                listOfTask.add(new Task(rs.getString(3)));
                listToReturn.add(new SubProject(rs.getInt(1), rs.getString(2), listOfTask));
            }
        }

    } catch (SQLException e) {
        e.printStackTrace();
    }
    return listToReturn;
}

Above here is my repository class in which I try to add the SQL data to lists. The SQL query outputs:
'4','spName','taskName'
'4','spName','taskName'
'4','spName','taskName'
'4','spName','taskName'
'6','subProjectTest','Test'
'8','stillWorking?','doSomeThing'

Which all is entries I have made. What I want to achieve is to add all the tasks where SPID (subprojectid) is the same to the same subproject object, and if the SPID changes then I'd like to make a new SubProject object in the list to add those data to. Obviously I'm doing this wrong right now, as when SPID == rs.getInt(1) I make a new SubProject object, but I really can not wrap my head around how to do this. I hope some one can help me

The output I'm trying to achieve is an arraylist which contains x amount of SubProjects with its subprojectID and corresponding subprojectname as well as a list of tasks. So with the entries from my database I wrote above I'd expect the following arraylist

ArrayList(
SubProject(4, spName, ArrayList(taskName, taskName, taskName, taskName))
SubProject(6, subProjectTest, ArrayList(Test))
SubProject(8, stillWorking?, ArrayList(doSomething)))

I want this list of subprojects shown in a HTML table like this:

EDIT: With the help of @TimonNetherlands I've accomplished a view that looks like the following. I wish to see a HTML thymeleaf table for each subproject where each row is a single task. Right now I can make it look like this the following with this code:

EDIT2: I messed up the thymeleaf, it works. Thanks to @TimonNetherlands

<div th:if=${!#lists.isEmpty(test)} class="taskTable">
    <div th:each="test : ${test}">
        <table class="showTasks" >
            <tr>
                <th>Sub project name</th>
                <th>Task name</th>
            </tr>
            <tr th:each="test1 : ${test.tasks}">
                <td th:text="${test.subProjectName}"></td>
                <td th:text="${test1.taskName}"></td>

            </tr>
        </table>
    </div>
</div>

Answer 1

SPIDcompare == rs.getInt(1) will never be true .

Remove

ArrayList<Task> listOfTask = new ArrayList<>();

Change

    int SPIDcompare = -1;
    while (rs.next()){
        if(SPIDcompare == rs.getInt(1)){
            listOfTask.add(new Task(rs.getString(3)));
            listToReturn.add(new SubProject(rs.getInt(1), rs.getString(2), listOfTask));
        }else{
            SPIDcompare = rs.getInt(1);
            listOfTask.add(new Task(rs.getString(3)));
            listToReturn.add(new SubProject(rs.getInt(1), rs.getString(2), listOfTask));
        }
    }

into:

    while (rs.next()){
        SubProject subProject = getSubProject(rs.getInt(1), listToReturn);
        if( subProject == null ){
            ArrayList<Task> listOfTask = new ArrayList<>();
            listOfTask.add(new Task(rs.getString(3)));
            listToReturn.add(new SubProject(rs.getInt(1), rs.getString(2), listOfTask));
        }else{
            subProject.getTasks().add( new Task(rs.getString(3) ); 
            // or subProject.tasks.add( new Task(rs.getString(3) ) if you don't have a getter
        }
    }

Add this method:

    private SubProject getSubProject( int subProjectID, List<SubProject> subProjects) {
        return subProjects.stream()
                // change 'p.getSubProjectID()' into 'p.subProjectID' if you don't have a getter
                .filter( p -> p.getSubProjectID() == subProjectID )
                .findFirst()
                .orElse( null );
    }