如何從輸入生成嵌套的Json對象？

Question

我需要從輸入中每天生成以下Json對象

{
  "name":"USA",
  "parents": [
     {
      "state":"California",
      "id":"12",
      "child":[
          {
             "city":"Los Angeles",
             "id":"1"
          },
          {
             "city":"San Francisco",
             "id":"2"
          }
       ]  
      },
      {
       "state":"Texas",
       "id":"33",
       "child":[
           {
              "city":"Dallas",
              "id":"3"
           },
           {
              "city":"Houston",
              "id":"4"
           }
        ]  
    }
  ] 
}

從這個輸入表

<table id="tTypeTable" class="table table-bordered" hidden="hidden" >
     <tr>
        <th><a class="btn btn-primary" onclick="add_tTypeParentField();"></th>
     </tr>
  <!-- ko foreach: {data: tTypeParentFields, as: 'tParentField'} -->
   <tr>
          <td>
           <table class="table table-hover" >
            <tr>
              <th> State </th>
              <th> </th>
            </tr>
            <tr title="tParentRow" >
              <td>
                <input id="state" data-bind="value: tParentField[0]" 
                  onblur="createJSON()"/>
              </td>                                          
              <td>
              <input id="value"  data-bind="value: tParentField[0]" 
                    onblur="createJSON()"/>
              </td>                                           
            </tr>
           </table>
        <table id="tChild" class="table table-hover"  >
           <tr>
             <th> City </th>
             <th> </th>
             <th> <a id="childAdd" onclick="addChild(this);"></th>
           </tr>
         <tbody>
          <tr title="tChildRow" id="tChildRow">
            <td>
             <input id="cityName"  onblur="createJSON()"/>
            </td>
            <td>
             <input  id="cityValue" " onblur="createJSON()"/>
            </td>
            <td>
             <a id="removeChild" onclick="deleteChild(this)" ></a>
            </td>
          </tr>
         </tbody>
        </table>
       <td> <a  data-bind="click: removeTTypeParentField" ></a></td>
     </td>
   </tr>
    <!-- /ko -->
</table>
 <div class="col-md-11 ">
   <textarea class="form-control" id="requestData" ></textarea>
 </div>

添加新的輸入行沒有問題。 我使用Knockouts添加Parent表並使用jQuery添加子表。 它運作良好。

問題是生成Json子對象（城市）。 我試圖獲得輸入的值，並在textare生成像這樣的Json對象

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script th:inline="javascript">
 function createJSON() {
       var jsonObj = [];
        $(document).ready(function() {
         var valueTypeTChild = [];
         var valueTypeTParent = [];

     $("tr[id=tParentRow]").each(function() {
        $(this).find('tr[id=tChildRow]').each(function () {
             child = {
                 city: $(this).find('#cityName').val(),
                 id: $(this).find('#cityValue').val()
                      };
                  valueTypeTChild.push(child);
         });
             parent = {
                  city:$(this).find('#state').val(),
                  id:$(this).find('#value').val(),
                  child: valueTypeTChild
             };

             valueTypeTParent.push(parent);

       );

      inputItem = {
         "name":"Country",
          parents:  valueTypeTParent
      };

      jsonObj.push(inputItem);

    });
         $('#requestData').val(JSON.stringify(jsonObj));
         console.log(JSON.stringify(jsonObj));


</script> 

但我得到了這個

{
"name": "USA",
"parents": [
  {
    "state": "California",
    "id": "12",
    "child": [
      {
        "city": "Los Angeles",
        "id": "1"
      },
      {
        "city": "San Francisco",
        "id": "2"
      },
      {
        "city": "Dallas",
        "id": "3"
      },
      {
        "city": "Houston",
        "id": "4"
      }
    ]
  },
  {
    "state": "Texas",
    "id": "33",
    "child": [
      {
        "city": "Los Angeles",
        "id": "1"
      },
      {
        "city": "San Francisco",
        "id": "2"
      },
      {
        "city": "Dallas",
        "id": "3"
      },
      {
        "city": "Houston",
        "id": "4"
      }
    ]
  }
]

}

Answer 1

您正在為每個state相同的城市陣列而不清除它。

移動var valueTypeTChild = []; 在$("tr[id=tParentRow]").each(function() { loop。