如何从Javascript中的数组构建对象

Question

我有2个input 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

您可以通过jQuery map()方法来实现，例如：

$('.button').click(function() {
    const data = $('.input').map(function(idex, elem) {
        return {
            text: $(elem).find('[type="text"]').val(),
            radio: $(elem).find('[type="radio"]:checked').map(function(i, el){
                return $(el).next('label').text();
            }).get()
        }    
    }).get();
    const mainData = {};
    data.map(function(value, index){
        mainData[index] = value;
    });
    console.log(mainData);
});

$('.button').click(function() {
  const data = $('.input').map(function(idex, elem) {
    return {
      text: $(elem).find('[type="text"]').val(),
      radio: $(elem).find('[type="radio"]:checked').map(function(i, el){
      return $(el).next('label').text();
      }).get()
    }    
  }).get();
  const mainData = {};
  data.map(function(value, index){
    mainData[index] = value;
  });
  console.log(mainData);
});

<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="button">
  <button>Build Object</button>
</div>

Answer 2

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

可以直接循环所有<input>，循环遍历div.input，然后创建对象并获取其id。之后，循环遍历div中的每个input元素，检查它是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>