How to return values from html with same class in an array

Question

I made a select tag in html and gave every option different values like this <option class="op" value="3"></option> <option class="op" value="4"></option> <option class="op" value="5"></option> I am trying to put this values in an array using js.

First I call the class and store in var = values then using the for loop I tried to put the values in an array but I get this error (i.value is not iterable)

var values = [...document.getElementsByClassName('op')];

for (i = 0; i< values.length; i++) {
    var originalValues = [...i.value];
    console.log(originalValues)
}

expected output: originalValues = [1,2,3,...]

Does this answer your question? [For loop for HTMLCollection elements](https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements) — mhodges, Jun 17 '20 at 16:29

Alkaniszt · Answer 1 · 2020-06-17T17:16:57.570

One line, no jQuery!

const values = [...document.getElementsByClassName('op')].map(op => op.value)

Basically it makes a new (real) array from the HTMLCollection, making the .map() method available that performs a specific operation on each item and returns a new array.

By the way the error comes from i.value in your loop. i is a number and does not have a .value property, so i.value is undefined hence is not iterable and can't be used with spread syntax.

Maybe this is what to wanted to do:

const htmlCollection = document.getElementsByClassName('op');
const originalValues = []

for (let i = 0; i < htmlCollection.length; i++) {
    originalValues[i] = htmlCollection[i].value;
    console.log(originalValues)
}

score 1 · Answer 2 · answered Jun 17 '20 at 16:34

1

const inputs = document.getElementsByClassName('op')
for (const input of inputs) {
    console.log(input.value)
}

answered Jun 17 '20 at 16:34

Barak Avraham

96
2

mhodges · Accepted Answer · 2020-06-17T16:53:10.847

0

The error message you received is exactly correct. The HTMLCollection that is returned by getElementsByClassName is not iterable, so you can't use the spread syntax (...) on it. If you want to iterate over it, you will need to use the for...of loop, or a standard for loop on it, like so:

let values = [];
for (let node of document.getElementsByClassName('op')) {
  values.push(node.value);
}

or

let nodes = document.getElementsByClassName('op');
let values = [];
for (var i = 0; i < nodes.length; i++) {
  let node = nodes[i];
  values.push(node.value);
}

edited Jun 17 '20 at 16:53

answered Jun 17 '20 at 16:31

mhodges

10,938
2
28
46

your code is unclear...At your first code what is line of code...should this line return the values?........................let values = node.value – Andrew Jons Jun 17 '20 at 16:49
@MarcoMaher You can do whatever you want with the node.value. You can log it, you can put it into an array - doesn't matter. – mhodges Jun 17 '20 at 16:51
I couldn't get it at first but your code works perfectly thanks for the help! – Andrew Jons Jun 17 '20 at 17:01
@MarcoMaher Glad I could help – mhodges Jun 17 '20 at 17:02

score 0 · Answer 4 · answered Jun 17 '20 at 16:32

0

Jquery makes this pretty simple. Grab the select tag by it's class, .op, then grab all of it's children options with the > option and just loop over them.

var values = []
$('.op > option').each(function(index, option){
    values.push($(option).text())
})
console.log(values)

Quickest way to get started with jquery is to add this right after your body tag in your html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

answered Jun 17 '20 at 16:32

b.stevens.photo

876
2
9
18

thanks for help your answer worked. but look at the answer of barak avraham it is more simple and also worked...why would I use jquery over simple js – Andrew Jons Jun 17 '20 at 16:41

score 0 · Answer 5 · answered Jun 17 '20 at 16:55

Add the id in Select condition just like that;

<select name="opps" id="opps">
    <option class="op" value="3"></option>
    <option class="op" value="4"></option>
    <option class="op" value="5"></option>
</select>

var assignedId = new Array();
$("#opps option").each(function()
{
    assignedId.push($(this).val());
});
console.log(assignedId);

How to return values from html with same class in an array

5 Answers5

One line, no jQuery!