如何使用 Json 对象填充动态添加的输入字段

Posted 2023-03-27

【中文标题】如何使用 Json 对象填充动态添加的输入字段

【英文标题】：How to populate dynamically added input fields with Json object

【发布时间】：2019-10-14 22:45:30

【问题描述】：

我有一个输入字段表，我可以在 KnockoutJS 的帮助下动态添加行

     <table id="sTypeTable" class="table table-bordered" hidden="hidden">
         <tr>
             <th> Name </th>
             <th> Value </th>
             <th> <a class="btn btn-primary btn-sm"  onclick="addReqField(0);"><i class="fa fa-plus"></i></a></th>
         </tr>
<!-- ko foreach: data: requestFields, as: 'reqField' -->
        <tr id="sRow">
           <td>
              <input id="sName" data-bind="value: reqField[0]" onblur="createJSON()"/>
           </td>
           <td>
              <input id="sValue" data-bind="value: reqField[0]" onblur="createJSON()"/>
           </td>
           <td>
              <a class="btn btn-warning  btn-sm" data-bind="click: removeResField2" ><i class="glyphicon glyphicon-remove"></i></a>
          </td>
       </tr>
<!-- /ko -->
 </table>
  <div class="col-md-11 ">
    <textarea style="font-size: larger; min-height: 200px" class="form-control" id="requestData" oninput="storeValueOfTextArea()"></textarea>
  </div>

根据我正在生成的这些输入 在 textarea 上跟随 Json 对象 (id="requestData")

[
  
    "users": [
      
        "name": "John",
        "value": "12"
      ,
      
        "name": "Sarah",
        "value": "13"
      ,
      
        "name": "Tom",
        "value": "14"
      
    ]
  
]

效果很好，但现在我需要从 Json 对象填充这些输入字段， 当对象进入 textarea 时。 我尝试了以下方式

<script th:inline="javascript">

 function storeValueOfTextArea() 
      var lines = $('#requestData').val();
      var texts = JSON.parse(lines);

  for (var i=0; i!== texts[0].users.length;i++)
      addReqField();  // method for adding new row of input fields

      let  v = texts[0].users[i];
      $("tr[id=sRow]").each(function() 
          $("#sName").val(v.name);
          $("#sValue").val(v.value);
      );
  
 </script>

但结果只有第一个输入字段获得最后一个对象

   "name": "Tom",
   "value": "14"
 

其他人保持空白

【参考方案1】：

$("tr[id=sRow]").each(function() 
      $("#sName").val(v.name);
      $("#sValue").val(v.value);
  );

这似乎不太好。您应该根据要为其填充数据的用户的索引来获取所需的行索引。现在，它的作用是在 for 循环的所有迭代中用相同的用户数据填充每一行。最后，最后的用户数据将在所有行中。

【参考方案2】：

我认为问题在于您为每个创建的新行提供了相同的 sRow ID。

所以在你的循环中

  $("tr[id=sRow]").each(function() 
      $("#sName").val(v.name);
      $("#sValue").val(v.value);
  );

在最后一次迭代中，这将用 Tom 和 14 的对象 last 值填充所有 sRow 元素。 尝试为您的行提供一个唯一的 id，例如 sRow + 从 0 开始的计数器 sRow0 sRow1...

【参考方案3】：

感谢所有回答这个问题的人。 我已经通过这种方式解决了这个问题

 for (let i=0; i!== texts[0].values.length;i++)
      addReqField();
      let  v = texts[0].values[i];
          $("tr[id=sRow]").each(function(index) 
              if (index === i)
                 $(this).find("#sName").val(v.name);
                 $(this).find("#sValue").val(v.value);
               

           );