How can I pass "array" attribute (sent from springboot controller) from thymeleaf to Javascript and iterate?

My Springboot controller searches some park names and sends an array attribute to thymeleaf object. It displays as a list with other related things. Now I want to pass only names of the park to javascript function which is in separate file sothat I can display those parks on google maps. I am able to send single name (with document.getElementById()), need to know how to send entire array. Any pointers are helpful.

With hidden input type tag 
id="playgroundName" th:value="${park.name}" 
<input id="playgroundName" th:value="${park.name}"/> I can access single name with 
location = document.getElementById('playgroundName') 
But when I say hidden input tag with 
id="playgroundNames" th:value="${parkNames} 
<input id="playgroundNames" th:value="${parkNames}"/> 
console.log(location) shows entire <input> tag with following values
"[com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@718352, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@16255f1, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@13cb4d8, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@14251f9, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@1af2090, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@3d2949, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@b5d5e2, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@12391d4, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@13e81c0, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@309a0f, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@647ee, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@16edc4b, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@c572e7, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@b77c92, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@866c9d, com.aplaygroundreviewer.aplaygroundreviewer.models.Playground@1837b82]"
Need to know how to handle this data to exract names in javascript

    controller-

        @RequestMapping(value="results")
        public String search(Model model, @ModelAttribute SearchForm searchForm){
            model.addAttribute("parkNames", playgroundDao.findByNameContainingOrDescriptionContaining(searchForm.getName(), searchForm.getName()));
            return "search-results";
        }

thymeleaf file -
<table>
        <tr th:each="park: ${parkNames}">
                <input id="playgroundName" th:value="${park.name}" type="hidden"/>
                <td th:text="${park.name}"></td>
                <td th:text="${park.description}"></td>
                <td th:text="${park.address}"></td>
        </tr>
</table>
    ...

        <script src="https://maps.googleapis.com/maps/api/js?key=KEY&amp;libraries=places&amp;callback=initMap"
                async="async" defer="defer">
        </script>

Solution

Here's what I did,

                    <tr th:each="park, itemStat: ${parkNames}">
                        <input id="playgroundName" th:name="|playgroundNames[${itemStat.index}]|"
                               th:value="${park.getName()}"
                               type="hidden"/>
                        <td><a th:href="@{/view/{id}(id=${park.id})}" th:text="${park.name}"></a></td>
                        <td th:text="${park.description}"></td>
                        <td th:text="${park.address}"></td>
                    </tr>

JavaSript

var locations = document.querySelectorAll("[id='playgroundName']");