Inserting values from an array of objects into a set of elements

Question

I have an array of objects and would like to insert their values into a set of inputs. I thought that using jQuery's val() to mass assign these values within a few for-loops but it only returns the very last value of the two objects. What am I doing wrong? Better yet, is there a better way to do this without having to loop 3 times?

$(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>

Is it correct to assume that the structure of arr cannot be changed? — Stryner
– Stryner, Commented Sep 11, 2015 at 2:56
Correct. I'm retrieving these objects from an API but hardcoded an small array here for demonstration's sake. — Carl Edwards
– Carl Edwards, Commented Sep 11, 2015 at 3:00

Stryner · Accepted Answer · 2015-09-11 03:10:20Z

2

$('input') will retrieve all 8 inputs on the page. So when you call $('input').val(newVal) you're setting the value of all 8 inputs. That's why all of the inputs have the last value after your code runs.

One solution is to retrieve all inputs at first and iterate through the inputs:

$(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>

And no, I cannot think of a way to accomplish this task without at least 2 loops. There are items in the array to iterate over, and items within the objects in the array to iterate over.

answered Sep 11, 2015 at 3:10

Stryner

7,3363 gold badges21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Carl Edwards Over a year ago

Thanks for the answer and explanation. One question though. How does currentIndex++ iterate itself being that it originally starts at 0? Wouldn't it keep returning 0?

Stryner Over a year ago

@CarlEdwards The ++ is the Post Increment Operator. currentIndex will return its value, then be incremented by 1. This is the same operator as the i++ in the for loop.

Andre.IDK · Accepted Answer · 2015-09-11 03:08:58Z

0

If you put all the <input> in a single <div> you can use this way

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++;
   })
});

You can see it at work in this JSFiddle

answered Sep 11, 2015 at 3:08

Andre.IDK

2,04715 silver badges19 bronze badges

Collectives™ on Stack Overflow

Inserting values from an array of objects into a set of elements

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related