如何用jQuery根据对象属性名匹配表单元素并填充数据？

我给所有input和select元素添加了objectInput类，方便统一控制。现在通过Ajax的$.get方法从服务器获取一个data对象，需求是遍历所有带objectInput类的元素，当元素的id与data的属性名匹配时，将对应属性的值赋值给该元素。我已编写了部分代码，但不清楚后续逻辑：

表单代码 #

<form id="inventoryForm" action="/ManderalMatrix/AddManderalInventory" class="reactiveToButton">
    <div class="row" style="margin-top: 18px">

        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Size of punch (mm)
                    <span style="color:red">*</span>
                </label>
                <input name="PunchSize" id="PunchSize" type="text" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Shape
                    <span style="color:red">*</span>
                </label>
                <select name="ProductConfigId" id="ProductConfigId" class="form-control objectInput">
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Radius of punch (mm)
                    <span style="color:red">*</span>
                </label>
                <input name="PunchRadius" id="PunchRadius" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Code
                    <span style="color:red">*</span>
                </label>
                <input name="ManderalMatrixCode" id="ManderalMatrixCode" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Quantity of upper punch
                    <span style="color:red">*</span>
                </label>
                <input name="UpperPunchQuantity" id="UpperPunchQuantity" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Quantity of die
                    <span style="color:red">*</span>
                </label>
                <input name="DieQuantity" id="DieQuantity" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Quantity of lower punch
                    <span style="color:red">*</span>
                </label>
                <input name="LowerPunchQuantity" id="LowerPunchQuantity" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Supplier
                    <span style="color:red">*</span>
                </label>
                <input name="Supplier" id="Supplier" type="text" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Manufacturer code
                    <span style="color:red">*</span>
                </label>
                <input name="ManufacturerCode" id="ManufacturerCode" type="text" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Type of die
                    <span style="color:red">*</span>
                </label>
                <select name="DieType" id="DieType" class="form-control objectInput">
                    <option value="1">B</option>
                    <option value="2">D</option>
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>Location</label>
                <select name="PlanConfigId" id="PlanConfigId" class="form-control objectInput">
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>Machine name</label>
                <select name="MachineId" id="MachineId" class="form-control objectInput">
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Large diameter
                    <span style="color:red">*</span>
                </label>
                <input name="LargeDiameter" id="LargeDiameter" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Small diameter
                    <span style="color:red">*</span>
                </label>
                <input name="SmallDiameter" id="SmallDiameter" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>

    </div>

</form>

现有JavaScript代码 #

function UpdateInventory(id) {

    $.get("/ManderalMatrix/GetTheInventory?id=" + id, function (data) {
        $('.objectInput').each(function () {

        })
    })
}

解决方案 #

可以通过以下逻辑完善each循环，实现自动匹配赋值：

function UpdateInventory(id) {
    $.get("/ManderalMatrix/GetTheInventory?id=" + id, function (data) {
        $('.objectInput').each(function () {
            // 获取当前元素的ID
            const elementId = $(this).attr('id');
            // 检查data对象中是否存在对应属性，避免无属性时报错
            if (data.hasOwnProperty(elementId)) {
                // 给表单元素赋值，jQuery的val()方法兼容input、select等多种表单元素
                $(this).val(data[elementId]);
            }
        });
    });
}

代码说明： #

• $(this).attr('id')：获取当前遍历到的表单元素的ID，用来匹配data对象的属性名
• data.hasOwnProperty(elementId)：验证data对象中是否存在该属性，防止因属性不存在导致的潜在错误
• $(this).val(data[elementId])：使用jQuery的val()方法给元素赋值，该方法能自动适配input、select等不同类型的表单元素，无需单独处理

内容的提问来源于stack exchange，提问作者Ali.F