动态输入框填充JSON指定键值对问题求助（附DEMO）

我看到你已经能在控制台验证getModelDetails[0].modelinfo里的键值对，但没法把它们正确填充到动态生成的输入框里——原代码的问题在于，每次添加模板后，你用.each()遍历了所有已存在的.modelAttribute和.modelType元素，导致之前创建的输入框也被覆盖成当前的属性名和值了。

下面是更优的解决方案，核心思路是给每个新创建的模板单独赋值，而不是批量修改所有元素：

优化后的代码示例 #

// 提前获取模板内容，避免重复查询DOM，提升性能
const templateHtml = $('#modelTemplate').html(); // 假设你的模板元素有id="modelTemplate"

// 使用Object.entries遍历属性，同时获取键和值，比for...in更安全（避免遍历原型链属性）
Object.entries(getModelDetails[0].modelinfo).forEach(([propName, propValue]) => {
  // 跳过modelname字段
  if (propName !== 'modelname') {
    // 基于模板创建新的DOM元素实例
    const $newTemplate = $(templateHtml);
    // 只给当前这个新模板里的输入框赋值
    $newTemplate.find('.modelAttribute').val(propName);
    $newTemplate.find('.modelType').val(propValue);
    // 将赋值后的模板添加到容器中
    $('#container').prepend($newTemplate);
  }
});

为什么这个方案更好？ #

• 避免批量覆盖问题：每次只操作刚创建的模板实例，不会影响之前已经添加到页面的输入框。
• 更安全的遍历方式：Object.entries()只会遍历对象自身的可枚举属性，不会意外遍历到原型链上的属性，比for...in更可靠。
• 性能优化：提前获取模板内容，减少重复的DOM查询操作，提升渲染效率。

额外注意事项 #

• 确保你的模板元素（比如<script type="text/template">或者隐藏的<div>）有正确的选择器，比如示例中的#modelTemplate。
• 如果你的模板是通过其他方式定义的（比如字符串模板），直接使用字符串即可，不需要从DOM中获取。

内容的提问来源于stack exchange，提问作者Inchara Raveendra