Get input value by looping name selector

Question

I want to loop through a list of element which have dynamic name's value, like item1,item2 etc. but I got undefined like below.

len = $('.aws').length + 1;

var obj = [],
  temp = {};

for (var i = 1; i <= len; i++) {
  console.log(i)
  temp["index"] = $('.aws[name="item' + i + '"]').val()
  obj.push(temp);
}

console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" class="aws" name="item1" value="1.jpg">
<input type="hidden" class="aws" name="item2" value="2.jpg">

Also, your second `class` does not match. Think you want both to be `aws`. — Twisty, Jan 20 '16 at 01:14
Possible duplicate of [Add new object to array](http://stackoverflow.com/questions/9543805/add-new-object-to-array) — Patrick Evans, Jan 20 '16 at 01:18
@PatrickEvans I'm getting `undefined`, it is not about object to array. — Nichole A. Miler, Jan 20 '16 at 01:20
You are getting undefined because you are using the wrong length condition in your for loop, the bigger problem is that you are adding the same object to the array in each iteration so each object is going to be exactly the same — Patrick Evans, Jan 20 '16 at 01:28

Josh Crozier · Accepted Answer · 2016-01-20T01:37:32.990

The problem is that you're pushing a reference to the same object on each iteration. In doing so, the index property on the temp object will be the value from the last iteration.

In addition, there are only two elements, and the for loop was executed three times because of the condition i <= len (it should have been i < len). Due to this, the value was undefined on the last iteration, because the element doesn't exist. This resulted in all the index properties on the temp property being set to undefined.

If you want a native JS solution, you could simply use the following instead:

var elements = document.querySelectorAll('.aws');
var values = [];

for (var i = 0; i < elements.length; i++) {
  values.push({index: elements[i].value});
}

In the snippet above, a new object is pushed to the values array on each iteration (rather than a reference to the same object). The for loop condition is also i < elements.length (rather than i <= elements.length), so it will only iterate 2 times (rather than 3 like in your example).

If you want a shorter jQuery solution, simply use the .map() method:

var values = $('.aws').map(function () {
  return {index: this.value };
}).get();

Twisty · Answer 2 · 2016-01-20T01:37:03.400

0

Try this: https://jsfiddle.net/Twisty/ys889cn6/1/

var obj = [],
  temp = {};

$(document).ready(function() {
  $(".aws").each(function(i, v) {
    obj.push({ "index": $(this).val() });
  });
  console.log(obj);
});

Much easier to loop this way. Read more: https://api.jquery.com/each/

Somewhat Native

$(document).ready(function() {
  var obj = [],
    temp = {},
  len = $('.aws').length;
  for (var i = 0; i < len; i++) {
  console.log("Get Value from: .aws[name='item" + (i+1) + "']");
    temp["index"] = $(".aws[name='item" + (i+1) + "']").val();
    obj.push(temp);
  }
  console.log(obj);
});

As @PatrickEvans stated, we're just dropping the same object in. Results:

Get Value from: .aws[name='item1']
Get Value from: .aws[name='item2']
[Object { index="2.jpg"}, Object { index="2.jpg"}]

Fixed by using:

$(document).ready(function() {
  var obj = [],
    temp = {},
  len = $('.aws').length;
  for (var i = 0; i < len; i++) {
  console.log("Get Value from: .aws[name='item" + (i+1) + "']");
    obj.push({"index": $(".aws[name='item" + (i+1) + "']").val()});
  }
  console.log(obj);
});

edited Jan 20 '16 at 01:37

answered Jan 20 '16 at 01:20

Twisty

30,304
2
26
45

I know I can do this but why native JS have problem? – Nichole A. Miler Jan 20 '16 at 01:21
Why did you Post to Jquery if you wanted Native solution? – Twisty Jan 20 '16 at 01:22
This is going to have the same problem, you are adding the same object in each iteration, you are overwriting the same property of the same object. – Patrick Evans Jan 20 '16 at 01:24
I suspect the issue with your native code comes in with the limit: `len = $('.aws').length + 1;`, this would be 3. When i is incremented, 0, 1, 2, 3... it will not have an object to find. Should be 2, with a < limit. 0, 1, those are all the items. – Twisty Jan 20 '16 at 01:25
your solution is broken, the value is repeated, 2.jpg twice. – Nichole A. Miler Jan 20 '16 at 01:34
Updated with more native code and a fix to the object logic. – Twisty Jan 20 '16 at 01:37

Get input value by looping name selector

2 Answers2