将对象数组中的值插入到一组元素中答案

【问题标题】：Inserting values from an array of objects into a set of elements将对象数组中的值插入到一组元素中
【发布时间】：2015-09-11 02:45:12
【问题描述】：

我有一个对象数组，想将它们的值插入到一组输入中。我认为使用 jQuery 的 val() 在几个 for 循环中大量分配这些值，但它只返回两个对象的最后一个值。我究竟做错了什么？更好的是，有没有更好的方法来做到这一点而不必循环 3 次？

$(function() {
  var arr = [{v1: 1, v2: 2, v3: 3, v4: 4}, {v1: 5, v2: 6, v3: 7, v4: 8}];
  
  for (var i = 0; i < arr.length; i++) {
    for (key in arr[i]) {
      $('input').val(function(index) {
        return arr[i][key]
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

<div>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

【问题讨论】：

假设arr的结构不能改变是否正确？
正确。我正在从 API 中检索这些对象，但为了演示，这里硬编码了一个小数组。

标签： javascript jquery loops object key-value

【解决方案1】：

$('input') 将检索页面上的所有 8 个输入。因此，当您调用$('input').val(newVal) 时，您正在设置所有 8 个输入的值。这就是代码运行后所有输入都具有最后一个值的原因。

一种解决方案是首先检索所有输入并遍历输入：

$(function() {
  var arr = [{v1: 1, v2: 2, v3: 3, v4: 4}, {v1: 5, v2: 6, v3: 7, v4: 8}];
  var $inputs = $("input");
  var currentIndex = 0;
  
  for (var i = 0; i < arr.length; i++) {
    for (key in arr[i]) {
      $inputs.eq(currentIndex++).val(arr[i][key]);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

<div>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

不，如果没有至少 2 个循环，我想不出一种方法来完成这项任务。数组中有要迭代的项，数组中有要迭代的对象中的项。

【讨论】：

感谢您的回答和解释。一个问题。 currentIndex++ 如何迭代自己，因为它最初从 0 开始？不会一直返回 0 吗？
@CarlEdwards ++ 是 Post Increment Operator。 currentIndex 将返回其值，然后加 1。这与 for 循环中的 i++ 相同。

【解决方案2】：

如果将所有<input> 放在一个<div> 中，则可以使用这种方式

var arr = [{v1: 1, v2: 2, v3: 3, v4: 4}, {v1: 5, v2: 6, v3: 7, v4: 8}];
var c = 1;
$inputs = $('input');
$.each(arr, function(i){
   $.each(arr[i], function(j){
     $('input:nth-child('+[c]+')').val(arr[i][j]);
     c++;
   })
});

你可以在这个JSFiddle看到它的工作

【讨论】：