如何修复虚假对象JSON数组？

Question

我在使用JSON创建对象数组时遇到问题。当我单击JSON上显示的保存按钮（#btnSave）时，显示如下。我想要的是一个我创建的表单，特别是TAG4名称，其div类名称“toAdd”可以按照我的要求进行分组。那么如何解决呢？

我的数据：

{
  "TAG1_ID": "1",
  "TAG2_ID": "2",
  "TAG3_ID": "3",
  "TAG4_NAME": [
    "Me",
    "You"
  ],
  "TAG4_AGE": [
    "20",
    "22",
    "17",
    "4"
  ],
  "TAG4_JOB": [
    "Police",
    "Fireman",
    "Student",
    "Baby"
  ]
}

我想要像这样创作：

{
  "TAG1_ID": "1",
  "TAG2_ID": "2",
  "TAG3_ID": "3",
  "temp": [
    {
      "TAG4_NAME": "Me",
      "detail_temp": [
        {
          "TAG4_AGE": "20",
          "TAG4_JOB": "Police"
        },
        {
          "TAG4_AGE": "22",
          "TAG4_JOB": "Fireman"
        }
      ],
    },
    {
      "TAG4_NAME": "You",
      "detail_temp": [
        {
          "TAG4_AGE": "17",
          "TAG4_JOB": "Student"
        },
        {
          "TAG4_AGE": "4",
          "TAG4_JOB": "Baby"
        }
      ],
    }
  ]
}

Javascript：

function saveForm(){
          var array = []; 
          var object = {};
          var serialArray = $('.ltktForm').serializeArray();
          /* var serialArray = $('.ltktForm'); 
          var data = JSON.stringify(serialArray.serializeArray()); */
          $.each(serialArray, function(){
           if(object[this.name]){
            if(!object[this.name].push){
                object[this.name] = [object[this.name]];
            }
            object[this.name].push(this.value || '');
           }else{
               object[this.name] = this.value || '';
           }
          });
          return object;
    } 

    $('#btnSave').on('click', function () {
            var data = saveForm();
            console.log(JSON.stringify(data));atas));

        });

我的表格：

<form class="form form-horizontal myForm" novalidate method="POST">
        <div class="tabNavigator">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a id="id1" href="#idOne" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_1</a>
                </li>
                <li role="presentation" class="active">
                    <a id="id2" href="#idTwo" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_2</a>
                </li>
                <li role="presentation" class="active">
                    <a id="id3" href="#idThree" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_3</a>
                </li>
            </ul><br>

            <!-- I ID_1 I -->

            <div class="tab-content">
                <div role="tabpanel" class="tabcontent tab-pane active" id="idOne">
                    <fieldset>
                        <legend>ID_1</legend>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label">Input ID 1</label>
                            <div class="col-sm-9">
                                <input class="form-control" type="text" name="TAG1_ID" />
                            </div>
                        </div>
                    </fieldset>
                </div>

                <!-- II ID_2 II -->
                <div role="tabpanel" class="tabcontent tab-pane active" id="idTwo">
                    <fieldset>
                        <legend>ID_2</legend>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label">Input ID 2</label>
                            <div class="col-sm-9">
                                <input class="form-control" type="text" name="TAG2_ID" />
                            </div>
                        </div>
                    </fieldset>
                </div>


                <!-- III ID_3 III -->
                <div role="tabpanel" class="tabcontent tab-pane active" id="idThree">
                    <fieldset>
                        <legend>ID_3</legend>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label">Input ID 3</label>
                            <div class="col-sm-9">
                                <input class="form-control" type="text" name="TAG3_ID" />
                            </div>
                        </div>
                    </fieldset>
                    <div class="toAdd">
                        <fieldset>
                            <legend>Temp</legend>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Input Name</label>
                                <div class="col-sm-9">
                                    <input class="form-control" type="text" name="TAG4_NAME" />
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">Input Age</label>
                                <div class="col-sm-9">
                                    <input class="form-control" type="text" name="TAG4_AGE" />
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">Input Job</label>
                                <div class="col-sm-9">
                                    <input class="form-control" type="text" name="TAG4_JOB" />
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <button class="addForm btn btn-primary" type="button">+</button>
                </div>
            </div>
</form>

<script>

$(document).ready(function() {
    var toAdd = 
                '<fieldset>'+
                        '<legend>Temp</legend>'+
                        '<div class="form-group">'+
                            '<label class="col-sm-2 control-label">Input Name</label>'+
                            '<div class="col-sm-9">'+
                                '<input class="form-control" type="text" name="TAG4_NAME" />'+
                            '</div>'+
                        '</div>'+
                        '<div class="form-group ">'+
                            '<label class="col-sm-2 control-label">Input Age</label>'+
                            '<div class="col-sm-9">'+
                                '<input class="form-control" type="text" name="TAG4_AGE" />'+
                            '</div>'+
                        '</div>'+
                        '<div class="form-group ">'+
                            '<label class="col-sm-2 control-label">Input Job</label>'+
                            '<div class="col-sm-9">'+
                                '<input class="form-control" type="text" name="TAG4_JOB" />'+
                            '</div>'+
                        '</div>'+
                    '</fieldset>';

    $('.addForm').on('click', function(){
        $(this).parent().find('div.toAdd').append(
                toAdd
            );
    });

    });
</script>

Answer 1

您必须手动执行数组结构，如：

＆＃13;

＆＃13;

$(function() {
  var toAdd = '<fieldset>' + '<legend>Temp</legend>' + '<div class="form-group">' + '<label class="col-sm-2 control-label">Input Name</label>' + '<div class="col-sm-9">' + '<input class="form-control" type="text" name="TAG4_NAME" />' + '</div>' + '</div>' + '<div class="form-group ">' + '<label class="col-sm-2 control-label">Input Age</label>' + '<div class="col-sm-9">' + '<input class="form-control" type="text" name="TAG4_AGE" />' + '</div>' + '</div>' + '<div class="form-group ">' + '<label class="col-sm-2 control-label">Input Job</label>' + '<div class="col-sm-9">' + '<input class="form-control" type="text" name="TAG4_JOB" />' + '</div>' + '</div>' + '</fieldset>';

  $('.addForm').on('click', function() {
    $(this).parent().find('div.toAdd').append(toAdd);
  });

  $('#btnSave').on('click', function() {
    var result = {};

    //Get the value of tag1, tag2, tag3
    result.TAG1_ID = $("input[name='TAG1_ID']").val();
    result.TAG2_ID = $("input[name='TAG2_ID']").val();
    result.TAG3_ID = $("input[name='TAG3_ID']").val();
    //You can add more input tags here <--
    

    var temp = {};
    //Loop thru tag4 divs
    //Loop thru fieldsets and get each value
    $(".toAdd fieldset").each(function() {
      var name = $(this).find("input[name='TAG4_NAME']").val();
      var age = $(this).find("input[name='TAG4_AGE']").val();
      var job = $(this).find("input[name='TAG4_JOB']").val();

      temp[name] = temp[name] || {
        TAG4_NAME: name,
        detail_temp: []
      }
      temp[name]["detail_temp"].push({
        TAG4_AGE: age,
        TAG4_JOB: job
      });
    });

    result.temp = Object.values(temp).map(v => v);

    console.log(result);

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form form-horizontal myForm" novalidate method="POST">
  <div class="tabNavigator">
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
        <a id="id1" href="#idOne" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_1</a>
      </li>
      <li role="presentation" class="active">
        <a id="id2" href="#idTwo" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_2</a>
      </li>
      <li role="presentation" class="active">
        <a id="id3" href="#idThree" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_3</a>
      </li>
    </ul>
    <br>

    <!-- I ID_1 I -->

    <div class="tab-content">
      <div role="tabpanel" class="tabcontent tab-pane active" id="id1">
        <fieldset>
          <legend>ID_1</legend>
          <div class="form-group ">
            <label class="col-sm-2 control-label">Input ID 1</label>
            <div class="col-sm-9">
              <input class="form-control" type="text" name="TAG1_ID" />
            </div>
          </div>
        </fieldset>
      </div>

      <!-- II ID_2 II -->
      <div role="tabpanel" class="tabcontent tab-pane active" id="id2">
        <fieldset>
          <legend>ID_2</legend>
          <div class="form-group ">
            <label class="col-sm-2 control-label">Input ID 2</label>
            <div class="col-sm-9">
              <input class="form-control" type="text" name="TAG2_ID" />
            </div>
          </div>
        </fieldset>
      </div>


      <!-- III ID_3 III -->
      <div role="tabpanel" class="tabcontent tab-pane active" id="id3">
        <fieldset>
          <legend>ID_3</legend>
          <div class="form-group ">
            <label class="col-sm-2 control-label">Input ID 3</label>
            <div class="col-sm-9">
              <input class="form-control" type="text" name="TAG3_ID" />
            </div>
          </div>
        </fieldset>
        <div class="toAdd">
          <fieldset>
            <legend>Temp</legend>
            <div class="form-group">
              <label class="col-sm-2 control-label">Input Name</label>
              <div class="col-sm-9">
                <input class="form-control" type="text" name="TAG4_NAME" />
              </div>
            </div>
            <div class="form-group ">
              <label class="col-sm-2 control-label">Input Age</label>
              <div class="col-sm-9">
                <input class="form-control" type="text" name="TAG4_AGE" />
              </div>
            </div>
            <div class="form-group ">
              <label class="col-sm-2 control-label">Input Job</label>
              <div class="col-sm-9">
                <input class="form-control" type="text" name="TAG4_JOB" />
              </div>
            </div>
          </fieldset>
        </div>
        <button class="addForm btn btn-primary" type="button">+</button>
        <button class="btn btn-primary" type="button" id='btnSave'>SAVE</button>

      </div>
    </div>
</form>

＆＃13;

＆＃13;

＆＃13;