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 — mhodges
– mhodges, Commented Jun 17, 2020 at 16:29

Alkaniszt · Accepted Answer · 2020-06-17 17:16:57Z

2

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

edited Jun 17, 2020 at 17:16

answered Jun 17, 2020 at 16:57

Alkaniszt

631 silver badge7 bronze badges

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

Comments

Barak Avraham · Accepted Answer · 2020-06-17 16:34:46Z

1

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

answered Jun 17, 2020 at 16:34

Barak Avraham

962 bronze badges

Comments

mhodges · Accepted Answer · 2020-06-17 16:53:10Z

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, 2020 at 16:53

answered Jun 17, 2020 at 16:31

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

4 Comments

Andrew Jons Over a year ago

your code is unclear...At your first code what is line of code...should this line return the values?........................let values = node.value

mhodges Over a year ago

@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.

Andrew Jons Over a year ago

I couldn't get it at first but your code works perfectly thanks for the help!

mhodges Over a year ago

@MarcoMaher Glad I could help

b.stevens.photo · Accepted Answer · 2020-06-17 16:32:43Z

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, 2020 at 16:32

b.stevens.photo

9744 gold badges10 silver badges20 bronze badges

1 Comment

Andrew Jons Over a year ago

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

aneela iqbal · Accepted Answer · 2020-06-17 16:55:19Z

0

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

answered Jun 17, 2020 at 16:55

aneela iqbal

1

Collectives™ on Stack Overflow

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

5 Answers 5

One line, no jQuery!

Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

One line, no jQuery!

Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related