thymeleaf打印集合数据

json

{
    "id": 82,
    "workNumber": "M202105241431",
    "issueNumber": "202105241431",
    "workName": "99999",
    "beginTime": "2021-05-24 14:31:00",
    "endTime": "2021-05-24 14:31:00",
    "proposer": "9999999",
    "applyTime": "2021-05-24 14:31:00",
    "type": 1,
    "fenceId": "202105241537",
    "ids": null,
    "deviceIds": null,
    "contractorId": null,
    "pageBean": {
        "page": 1,
        "rows": 1,
        "total": 0,
        "pagination": false
    },
    "organId": 0,
    "fence": {
        "fid": "c400950fbbcc46e0aad3ab2c1527f4bf",
        "name": null,
        "polygon": "POLYGON((108.609408309177 21.7154145609395,108.609416256597 21.7154225081542,108.609424203689 21.7154145609395,108.609408309177 21.7154145609395))",
        "geom": null,
        "placeId": "97",
        "buildingId": 1,
        "floorId": "01",
        "lonLats": [
            [108.609408309177, 21.7154145609395],
            [108.609416256597, 21.7154225081542],
            [108.609424203689, 21.7154145609395],
            [108.609408309177, 21.7154145609395]
        ]
    }
};

1:Thymeleaf 获取model中的值
访问model中的数据
//通过“${}”访问model中的属性

<input type="text" id="id" hidden="true" th:value="${workDetail.id}" />

<input type="text" th:value="${workDetail.workNumber}" id="workNumber"></input>

<input type="text" th:value="${workDetail.issueNumber}" id="issueNumber">

<input type="text" th:value="${workDetail.workName}" id="workName"></input>

2:JS获取Model中的数据

<script th:inline="javascript">
        var a = [[${workDetail}]];
        var b = [[${workDetail.id}]];
        var c = [[${workDetail.workNumber}]];
        var d = [[${workDetail.issueNumber}]];
        var e = [[${workDetail.workName}]];
        var f = [[${workDetail.fence.lonLats}]];
</script>

        var a = {"id":82,"workNumber":"M202105241431","issueNumber":"202105241431","workName":"99999","beginTime":"2021-05-24 14:31:00","endTime":"2021-05-24 14:31:00","proposer":"9999999","applyTime":"2021-05-24 14:31:00","type":1,"fenceId":"202105241537","ids":null,"deviceIds":null,"contractorId":null,"pageBean":{"page":1,"rows":1,"total":0,"pagination":false},"organId":0,"fence":{"fid":"c400950fbbcc46e0aad3ab2c1527f4bf","name":null,"polygon":"POLYGON((108.609408309177 21.7154145609395,108.609416256597 21.7154225081542,108.609424203689 21.7154145609395,108.609408309177 21.7154145609395))","geom":null,"placeId":"97","buildingId":1,"floorId":"01","lonLats":[[108.609408309177,21.7154145609395],[108.609416256597,21.7154225081542],[108.609424203689,21.7154145609395],[108.609408309177,21.7154145609395]]}};
        var b = 82;
        var c = "M202105241431";
        var d = "202105241431";
        var e = "99999";
        var f = [[108.609408309177,21.7154145609395],[108.609416256597,21.7154225081542],[108.609424203689,21.7154145609395],[108.609408309177,21.7154145609395]];
        var g = '[[108.609408309177,21.7154145609395],[108.609416256597,21.7154225081542],[108.609424203689,21.7154145609395],[108.609408309177,21.7154145609395]]';