Thymeleaf 和 A​​JAX 映射 JSON 数据

Question

我有一个使用 Thymeleaf 的 Spring-Boot 项目。

HTML 表单具有用于输入个人详细信息的字段组，例如：

<button type="button" class="btn btn-default" id="btnGetPerson"><i class="fa fa-search"></i></button>
<Input type="text" id="id0" name="id" th:field="*{person[0].id}" />
<Input type="text" name="surname" th:field="*{person[0].surname}" />
<Input type="text" name="firstname" th:field="*{person[0].firstname}" />
...
<button type="button" class="btn btn-default" id="btnGetPerson"><i class="fa fa-search"></i></button>
<Input type="text" id="id1" name="id" th:field="*{person[1].id}" />
<Input type="text" name="surname" th:field"=*{person[1].surname}" />
<Input type="text" name=firstname" th:field="*{person[1].firstname}" />
etc

结果以 JSON 格式正确地从服务器返回，如下所示：

surname : Smith
firstname: Bob

然后在我得到的脚本文件中：

    // GET AND RETURN PERSON
$( '#btnGetPerson').click(function() {
    var $theForm = $(this).closest('.panel-body');
    $.get('/person/' +$('#id0').val(), function(result) {
        $theForm.find('input[name="surname"]').val(result.surname);
    });
});

然后我打算这样做：

Object.keys(result).forEach(function(key) {
$('[name="' + key + '"]').val(result[key]);
});

迭代 JSON 中的键和值 - 但是 Thymeleaf 重命名 HTML 中的名称字段以匹配表单支持对象，因此我的 name="surname" 被 name="event.person[0] 覆盖.surname”，其中 event 是支持对象。

我应该如何处理将从服务器返回的 JSON 数据映射到 DOM？

更新

呈现的 html 示例如下所示：

                    <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Victim / Subject</h3>
                    </div>
                    <div class="panel-body">


                        <div class="row">
                            <input type="text" class="form-control hidden" id="personId0" name="persons[0].id" value="1" />
                            <div class="col-sm-5">
                                <div class="form-group">

                                    <label for="surname0" class="col-sm-2 control-label">Surname</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="surname0" placeholder="surname" name="persons[0].surname" value="EASTWOOD"/>
                                    </div>
                                </div>
                            </div

我还应该补充一点，表单最初呈现三个人（索引 0、1、2），然后有一个按钮可以通过克隆 html 片段动态添加另一组人员字段。

Answer 1

从服务器返回的 JSON 数据如下所示：

{  
"id":1,
"surname":"EASTWOOD",
"middlename":"James",
"firstname":"Clint",
"countryOfBirth":"US",
"occupation":"Actor",
"gender":"Male",
"phoneHome":"555-1234",
"dob":"1965-06-17"
}

将此映射到输入，但名称和 ID 由 thymeleaf 重命名。因此，为了解决这个问题，请使用名称与 JSON 中的键名匹配的数据属性字段。所以html输入看起来像：

<input type="text" class="form-control  person" data-property="surname" placeholder="surname" th:field="*{persons[0].surname}"/>
<input type="text" class="form-control  person" data-property="firstname" placeholder="Firstname" th:field="*{persons[0].firstname}"/>
<select class="selectpicker form-control person" data-property="countryOfBirth" data-live-search="true" title="Birth Country" th:field="*{persons[0].countryOfBirth}">

现在 data-property 提供了匹配 JSON 名称的标签。

查找最近的面板主体然后更新输入的 jquery 和 javascript 如下所示。 注意，由于下拉菜单在 twitter-bootstrap 中显示为按钮的方式，我必须找到一个不同的类：

// GET AND RETURN PERSON
$( '#btnGetPerson').click(function() {
    var $theForm = $(this).closest('.panel-body');
    $.get('/person/' +$('#nia0').val(), function(result) {

        // LOOPS OVER THE PERSON INPUTS
        $theForm.find('.form-control.person').each(function()  {
            var formkey = $(this).attr('data-property');
            $(this).val(result[formkey]);
        });

        // LOOPS OVER THE SELECT PICKERS
        $theForm.find('.bootstrap-select').each(function() {
            var formkey = $(this).find('.selectpicker.form-control').attr('data-property');
            $(this).find('.filter-option').text(result[formkey]);
            $(this).find('.filter-option').val(result[formkey]);
        });
    });
});

感谢所有提供帮助的人。

希望这对其他人有所帮助。