如何解决Materialize模态框仅填充最后一组键值对的问题？

你遇到的核心问题是：每次循环都直接给同一个.modelAttribute和.modelType输入框赋值，后面的键值对会覆盖前面的内容，最终只保留最后一组数据。另外你的代码里存在重复的$.each(el.modelinfo)循环，逻辑冗余且混乱，进一步加剧了覆盖问题。

从后端返回的JSON结构来看，modelinfo包含多个属性（temp、hum、co），你需要为每个属性在模态框中创建独立的输入区域，而不是反复覆盖同一个输入框的值。

假设你的Materialize模态框里有一个容器（比如<div class="attributes-container"></div>）用来存放多组属性输入框，我们可以通过动态生成DOM元素的方式，为每个属性创建独立的输入行，彻底解决覆盖问题。

修改后的代码 #

$('.addAttribute').click(function() {
  if (deviceIdStatus === 'old') {
    // 先清空属性容器，避免重复添加旧数据
    $(".attributes-container").empty();
    
    var getModelDetails = ajaxServices("/getServices/models", "GET");
    console.log(JSON.stringify(getModelDetails));
    
    // 设置modelname并禁用输入
    $('#modelName').val(getModelDetails[0].modelinfo.modelname).attr('disabled', 'disabled');
    
    // 遍历modelinfo中的所有键值对
    $.each(getModelDetails[0].modelinfo, function(key, val) {
      if (key !== "modelname") {
        console.log(key + ":" + val);
        
        // 动态生成一组属性输入框的HTML结构
        var attributeRow = `
          <div class="row attribute-row">
            <div class="input-field col s6">
              <input type="text" class="modelAttribute" value="${key}">
              <label class="active">Attribute Name</label>
            </div>
            <div class="input-field col s6">
              <input type="text" class="modelType" value="${val}">
              <label class="active">Attribute Type</label>
            </div>
          </div>
        `;
        
        // 将新生成的属性行添加到容器中
        $(".attributes-container").append(attributeRow);
      }
    });
    
    // 所有属性添加完成后，再触发模态框打开
    $(".addModel").trigger("click");
  }
});

关键修改点说明 #

1. 移除冗余循环：原代码嵌套的$.each完全没必要，从你的JSON返回值来看，getModelDetails数组只有一个元素，直接取getModelDetails[0]即可。
2. 动态生成独立DOM元素：为每个非modelname的键值对创建专属的输入行，彻底避免值被覆盖的问题。
3. 提前清空容器：每次点击按钮时先清空属性容器，防止重复添加旧数据。
4. 调整模态框触发时机：把模态框打开的操作移到循环外面，确保所有属性都添加完成后再显示模态框，避免循环中多次触发导致的异常。

模态框HTML结构参考 #

确保你的模态框包含对应的属性容器：

<div id="modelModal" class="modal">
  <div class="modal-content">
    <h4>Add Model Attributes</h4>
    <div class="row">
      <div class="input-field col s12">
        <input type="text" id="modelName">
        <label>Model Name</label>
      </div>
    </div>
    <!-- 属性容器：用来存放动态生成的属性输入行 -->
    <div class="attributes-container"></div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Save</a>
  </div>
</div>

这样修改后，模态框里会完整显示modelinfo中除modelname外的所有键值对，每组属性对应独立的输入框，不会再出现被覆盖的情况。

内容的提问来源于stack exchange，提问作者Hema Krishna