循环内的Javascript对象创建答案

【问题标题】：Javascript Object Creation inside loop循环内的Javascript对象创建
【发布时间】：2017-05-15 14:29:38
【问题描述】：

我一直在尝试在循环中创建对象。下面是我的代码。

<div class="container">
<div class="personDetails">
<input type="text" class="abc" id="Name1">
<input type="text" class="abc" id="Age1">
</div>
<br /><br />
<div class="personDetails">
<input type="text" class="abc" id="Name2">
<input type="text" class="abc" id="Age2">
</div>
<button onclick="getDetails()">Check Value</button>
</div>

下面是javascript..

function getDetails(){
var myObj = {};
$('.personDetails').each(function(){
        $(this).children().each(function(){
myObj[$(this).attr('id')] = $(this).val();
            });
    });
console.log(myObj);
}

下面是它在控制台中的样子。但我不想把它全部归为一个对象。我想要的是每个人都应该在那个 .each 循环中创建每个对象。我知道我很亲密，但不知道我做错了什么。

Object {Name1: "cfr", Age1: "15", Name2: "fgatat", Age2: "25"}

我想做的事

person1 {Name: "cfr", Age: "15"}, 
person2 {Name: "fgatat", Age: "25"}

【问题讨论】：

在循环外创建一个数组，在循环内创建每个新对象，并将每个新对象添加到数组中。
我正在这样做，但我把它搞砸了。请告知您是否可以复制粘贴它应该像的功能。麻烦您了，谢谢
这样做的目的是什么？通常，您使用输入从用户那里收集数据，并将该数据用于某些事情，例如将其发送到服务器，然后您根本不会这样做，您只需序列化输入即可
我不想使用表单，所有名为 personDetails 的 div 都将通过 jquery 动态添加，具体取决于他们想要多少个 div，然后当单击按钮时，我想遍历每个字段并过滤它的值，它们当然会使用 $.ajax 发送到服务器。服务器端脚本知道他期望有多少对象，并将遍历所有对象并存储在数据库中。一个发布的对象将有一个或多个对象。

标签： javascript jquery arrays json object

【解决方案1】：

这是一种可能的解决方案：

function getDetails(){
  var myObj = [];
  $('.personDetails').each(function() {
        var person = {};
        $(this).children().each(function(){
            person[$(this).attr('id')] = $(this).val();
        });
        myObj.push(person)
    });
   console.log(myObj);
}

【讨论】：

但是您不会在每个人的对象中仍然有不同的键，例如name1、name2 等吗？
是的。但现在编号可能会在创建期间从这些 ID 中删除。或者可以使用任何其他技巧。
实际上我不会使用 id，将使用名称 attr 获取数据。每个对象都会有名字和年龄

【解决方案2】：

你应该用window[myvar]声明一个var

function getDetails(){
$('.personDetails').each(function(i){
  i+=1;
  window["person"+i] = {};
  $(this).children().each(function(){
    window["person"+i][$(this).attr('id')] = $(this).val();
  });
});
console.log(person1);
console.log(person2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="personDetails">
<input type="text" class="abc" id="Name1">
<input type="text" class="abc" id="Age1">
</div>
<br /><br />
<div class="personDetails">
<input type="text" class="abc" id="Name2">
<input type="text" class="abc" id="Age2">
</div>
<button onclick="getDetails()">Check Value</button>
</div>

【讨论】：

【解决方案3】：

这是执行此操作的另一种方法，它可以准确地为您提供所需的输出

$('#btn').on('click', function() {
  var result = $('.personDetails').toArray().reduce(function(a, b, i) {
    return a['person' + (++i)] = {
      Name: $(b).find('[id^=Name]').val(),
      Age: $(b).find('[id^=Age]').val()
    }, a;
  }, {});

  console.log(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="personDetails">
    <input type="text" class="abc" id="Name1">
    <input type="text" class="abc" id="Age1">
  </div>
  <br /><br />
  <div class="personDetails">
    <input type="text" class="abc" id="Name2">
    <input type="text" class="abc" id="Age2">
  </div>
  <button id="btn">Check Value</button>
</div>

【讨论】：

【解决方案4】：

如果 ID 始终采用相同的形式 NameX 和 AgeX，您可以更新代码以使用 $(this).attr('id').replace(/\d+$/, '') 仅提取 Name 和 Age 部分并将它们用作属性。

这应该是你的代码：

function getDetails() {
  var results = [];
  $('.personDetails').each(function() {
    var person = {};
    $(this).find('input[type="text"]').each(function() {
      person[$(this).attr('id').replace(/\d+$/, '')] = $(this).val();
    });
    results.push(person)
  });
  console.log(results);
}

演示：

这是一个有效的 Demo sn-p：

function getDetails() {
  var results = [];
  $('.personDetails').each(function() {
    var person = {};
    $(this).find('input[type="text"]').each(function() {
      person[$(this).attr('id').replace(/\d+$/, '')] = $(this).val();
    });
    results.push(person)
  });
  console.log(results);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="personDetails">
    <input type="text" class="abc" id="Name1">
    <input type="text" class="abc" id="Age1">
  </div>
  <br /><br />
  <div class="personDetails">
    <input type="text" class="abc" id="Name2">
    <input type="text" class="abc" id="Age2">
  </div>
  <button onclick="getDetails()">Check Value</button>
</div>

【讨论】：

【解决方案5】：

为什么不尝试以下方法，为您的输入添加一个使用以下格式 inputName[index] 的名称。这样您就可以使用索引提取代码。从输入中提取值的选择器类似于'input[name="inputName[' + index + ']"'。然后你需要做的就是在 for 循环中使用它。您甚至可能有一个基于 jQuery 函数生成所有字段的函数。

(function($) {
  //Object
  function Person(name, age) {
    var self = this;
    self.name = name;
    self.age = age;
    return self;
  }

//actual getDetails function
  function getDetails() {
    var myObj = [];
    var name, age; //These vars are added for readabilitys sake. You could place them directly in the new Person()
    for (i = 0; i < 3; i++) {
      
      name = $('input[name="Name[' + i + ']"').val();
      age = $('input[name="Age[' + i + ']"').val();
      myObj.push(new Person(name, age));
    }

    console.log(myObj);
  }

 //Click Binding
  $("#getDetails").on('click', getDetails);

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="personDetails">
    <input type="text" class="abc" name="Name[0]">
    <input type="text" class="abc" name="Age[0]">
  </div>
  <br /><br />
  <div class="personDetails">
    <input type="text" class="abc" name="Name[1]">
    <input type="text" class="abc" name="Age[1]">
  </div>
  <div class="personDetails">
    <input type="text" class="abc" name="Name[2]">
    <input type="text" class="abc" name="Age[2]">
  </div>
  <button type="button" id="getDetails">Check Value</button>
</div>

【讨论】：