javascript - 如何在 Javascript 中从数组构建对象

Question

我有 2 个输入 div，每个 div 有多个输入。我想从数组构建一个对象。我从输入元素循环获取每个值，然后我尝试将 input div 的索引保存在我构建的对象中，因为我想将它们分组在 HTML 中设计的对象中.，但我没有获取保存在 data 变量中的所有值。知道我做错了什么吗？

这是 HTML 标记和 JS:-

var data = [];

$('.button').click(function() {
  $('.input input').each(function(i) {
    var index = $(this).parent().parent().prevAll().length;
    var obj = {};
    
    obj.text = $(this).val();
    obj.radio = $(this).val();
    
    data.push({
      index: index,
      obj: obj
    });
    
  });
  
  var inputs = [];
  $.each(data, function() {
    inputs[this.index] = this.obj;
  });
  
  console.log(inputs);
});

.input {
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="input">
    <strong>Test 1</strong>
    <div class="text">
      <input type="text" value="test" />
    </div>
    <div class="radio">
      <input type="radio" id="input-1-yes" name="input-1" value="Input 1: Yes" checked>
			<label for="input-1-yes">Input 1: Yes</label>
    </div>
    <div class="radio">
      <input type="radio" id="input-1-no" name="input-1" value="Input 1: No">
			<label for="input-2-no">Input 2: No</label>
    </div>
  </div>

  <div class="input">
    <strong>Test 2</strong>
    <div class="text">
      <input type="text" value="test 2" />
    </div>
    <div class="radio">
      <input type="radio" id="input-1-yes" name="input-2" value="Input 3: Yes">
			<label for="input-3-yes">Input 3: Yes</label>
    </div>
    <div class="radio">
      <input type="radio" id="input-4-no" name="input-2" value="Input 4: No" checked>
			<label for="input-4-no">Input 4: No</label>
    </div>
    
    <div class="radio">
      <input type="radio" id="input-5-yes" name="input-3" value="Input 5: Yes">
			<label for="input-5-yes">Input 5: Yes</label>
    </div>
    <div class="radio">
      <input type="radio" id="input-6-no" name="input-3" value="Input 6: No" checked>
			<label for="input-6-no">Input 6: No</label>
    </div>
  </div>
</div>

<div class="debug-template">
  <div></div>
</div>

<div class="debug-container">
</div>

<div class="button">
  <button>Build Object</button>
</div>

预期输出:-

{
  0: {
    text: 'test',
    radio: {
      '0': 'Input 1: Yes'
    }
  },
  1: {
    text: 'test 2',
    radio: {
      '0': 'Input 4: No',
      '1': 'Input 6: No'
    }
  }
}

Answer 1

因此，根据您想要的输出，我需要对您的代码逻辑进行一些修改...

直接循环所有<input> ，循环遍历div.input然后创建对象并获取其 id 。之后，循环遍历每个 input div 内的元素，检查它是否是 text或radio类型，如果是单选，检查是否已选中，然后推送或不推送到 obj单选对象。

请参阅下面的代码。

-> 编辑 <-
一旦您说过所需的输出需要是外部 object而不是数组，并且 object.radio 应该是另一个对象，然后我修改了代码如下:

var data = {};

$('.button').click(function() {
  $('.input').each(function(i) {
    let index = $(this).index();    
    var obj = {};    
    var radioCount = 0
    obj.text = "";
    obj.radio = {};
    
    $(this).find("input").each((idx, elem) => {
      if (elem.type == "text"){
        obj.text = elem.value;
      }else if (elem.type == "radio" && elem.checked == true){
        obj.radio[radioCount] = (elem.value);
        radioCount++;
      }
    });
    data[i] = obj;
  });
  
  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="input">
    <div class="text">
      <input type="text" value="test" />
    </div>
    <div class="radio">
      <input type="radio" id="input-1-yes" name="input-1" value="Input 1: Yes" checked/>
			<label for="input-1-yes">Input 1: Yes</label>
    </div>
    <div class="radio">
      <input type="radio" id="input-1-no" name="input-1" value="Input 1: No"/>
			<label for="input-2-no">Input 2: No</label>
    </div>
  </div>

  <div class="input">
    <div class="text">
      <input type="text" value="test 2" />
    </div>
    <div class="radio">
      <input type="radio" id="input-1-yes" name="input-2" value="Input 3: Yes"/>
			<label for="input-3-yes">Input 3: Yes</label>
    </div>
    <div class="radio">
      <input type="radio" id="input-4-no" name="input-2" value="Input 4: No" checked/>
			<label for="input-4-no">Input 4: No</label>
    </div>
    
    <div class="radio">
      <input type="radio" id="input-5-yes" name="input-3" value="Input 5: Yes"/>
			<label for="input-5-yes">Input 5: Yes</label>
    </div>
    <div class="radio">
      <input type="radio" id="input-6-no" name="input-3" value="Input 6: No" checked/>
			<label for="input-6-no">Input 6: No</label>
    </div>
  </div>
</div>

<div class="debug-template">
  <div></div>
</div>

<div class="debug-container">
</div>

<div class="button">
  <button>Build Object</button>
</div>