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

Question

I have a this table of input fields which I can add rows dynamically with help of 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>

From this inputs I'm generating following Json object on textarea (id="requestData")

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

It works well, but now I need populate these input fields from Json object, When object entered to textarea. I have tried following way

<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>

but in result only first input field gets the last object

{
   "name": "Tom",
   "value": "14"
 }

others stays empty

Answer 1

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

This doesn't seem to be good. You should get the row index you want, according to the index of the user for which data you want to fill. Right now what this does is to fill every row with the same user data, in all iterations of the for loop. In the end, the last user data will be in all rows.

Answer 2

I think the problem is that you're giving each created new row the same ID of sRow .

So inside your loop

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

in the last iteration this will fill all sRow elements with the objects last values of Tom and 14 . Try giving your rows an unique id like sRow + a counter from 0 onwards sRow 0 sRow 1 ...

Answer 3

Thank you all who have answered to this question. I have solved this problem by this way

 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);
               }

           });
 }