Using two array values in foreach loop

Question

I have the following loop:

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];

array.forEach(function(arr) {
  $(".department").append('<option value="' + array + '">' + textArray + '</option>');
});

What I'm trying to achieve is the <option> label to use the text but its value to use the array array.

If I do the following:

$(".filterSection .department").append('<option value="'+array+'">'+textArray+'</option>');

My output looks like this:

<option value="Value 1,Value 2,Value 3">Text 1</option>
<option value="Value 1,Value 2,Value 3">Text 2</option>

Whereas I'm looking for:

<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>

change <option value="'+array+'"> to <option value="'+arr+'"> — Adelin
– Adelin, Commented Feb 19, 2020 at 7:53
array.forEach(function(item, i) { $(".department").append('<option value="' + item + '">' + textArray[i] + '</option>'); }); — falsetru
– falsetru, Commented Feb 19, 2020 at 7:54

mplungjan · Accepted Answer · 2020-02-19 09:37:29Z

2

Using map and literal templating.

NOTE: The append will only perform one DOM update which is recommended
NOTE: It seems .join("") is not even needed in the append

var array = ["Value 1", "Value 2", "Value 3"],
textArray = ["Text 1", "Text 2", "Text 3"],
options   = array.map((val,i) => `<option value="${val}">${textArray[i]}</option>`);  

$(".department").append(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="department">
<option value="">Please select</option>
</select>

edited Feb 19, 2020 at 9:37

answered Feb 19, 2020 at 8:10

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

6 Comments

Yevhen Horbunkov Over a year ago

Speaking about performance, I'm not quite sure what's the reason, but reduce() seem to perform much better.

mplungjan Over a year ago

@YevgenGorbunkov I see an error is returned for the map example in your bench

mplungjan Over a year ago

Whatever I do I get error in the first code. Even when I swap yours and mine - Chrome 78

mplungjan Over a year ago

Can you try

const options = array.map(     (val,i) => `<option value="${val}">${textArray[i]}</option>` ); $('.department').append(options)

just for fun to see if the .append is happier with a separate append

Yevhen Horbunkov Over a year ago

And it seems that concatenating resulting string gradually is also slowing down the reduce()

|

Nina Scholz · Accepted Answer · 2020-02-19 07:54:48Z

1

Just take a plain for loop over the indices and take the elements from both arrays.

var array = ["Value 1", "Value 2", "Value 3"],
    textArray = ["Text 1", "Text 2", "Text 3"];

for (let i = 0; i < array.length; i++) {
    $(".department").append('<option value="' + array[i] + '">' + textArray[i] + '</option>');
}

answered Feb 19, 2020 at 7:54

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

4 Comments

mplungjan Over a year ago

Wow. No map/reduce? So I for once posted more ES6 than you ;)))

Nina Scholz Over a year ago

yes, three times. if not wanted, a string with all options would help.

Elliot Over a year ago

@NinaScholz bro, can you add me on discord so I can ask questions when I get stucked on JS. I'm currently a beginner and sometimes on Stackoverflow I paste too many codes in or get downvoted even after I do my research. I will pay you xd xd#4536. It would be convenient if I can have someone that can help me once in a while when I get confused.

Nina Scholz Over a year ago

@Elliot, acutally am not somehere else. you could stll ask here.

Prakhar Mittal · Accepted Answer · 2020-02-19 07:59:04Z

0

You are not using the indexes while passing the array. Instead, you are passing the whole array.

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];

array.forEach(function(arr,index) {
  $(".department").append('<option value="' + arr + '">' + textArray[index] + '</option>');
});

answered Feb 19, 2020 at 7:59

Prakhar Mittal

6,5051 gold badge16 silver badges31 bronze badges

Comments

Ele · Accepted Answer · 2020-02-19 08:25:22Z

0

You can use the function map for creating an array of Option objects and then append that array to the desired element.

This is a dry approach, and also you can use the Option object if you want to add some features/behavior, read the documentation for more detail.

let array = ["Value 1", "Value 2", "Value 3"];
let textArray = ["Text 1", "Text 2", "Text 3"];
$(".department").append(array.map((v, i) => new Option(textArray[i], v)));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="department">
<option value="">Please select</option>
</select>

answered Feb 19, 2020 at 8:25

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Comments

Amjed Omar · Accepted Answer · 2020-02-19 08:27:07Z

0

One of the ways that will give you the result that you want

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];

const options = Object.assign({}, ...array.map((key, index) => {
  return {
    [key]: textArray[index]
  };
}));

Object.keys(options).forEach(optionKey => {
   $(".department").append('<option value="' + optionKey + '">' + options[optionKey] + '</option>');
});

Another solution

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];

const options = Object.assign({}, ...array.map((key, index) => {
  return {
    [key]: textArray[index]
  };
}));

Object.entries(options).forEach(option => {
   $(".department").append('<option value="' + option[0] + '">' + option[1] + '</option>');
});

edited Feb 19, 2020 at 8:27

answered Feb 19, 2020 at 8:01

Amjed Omar

1,0583 gold badges21 silver badges35 bronze badges

2 Comments

mplungjan Over a year ago

That is too much code for something as simple as this

Amjed Omar Over a year ago

@mplungjan you are right, my answer is working but your answer is the best until now :) however incoming questions I will keep trying to do my best to provide helpful answers

yunzen · Accepted Answer · 2020-02-19 08:18:04Z

-1

var html = '<option value="">default</option>';
var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];
for (var i = 0; i < array.length; i++) {
  html += '<option value="' + array[i] + '"';

  html += '>' + textArray[i] + '</option>';

}

document.getElementById('select').innerHTML = html;

<select name="HelmAtt1" id="select"></select>

edited Feb 19, 2020 at 8:18

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

answered Feb 19, 2020 at 8:00

Mahmoud Sabri

7951 gold badge8 silver badges23 bronze badges

Collectives™ on Stack Overflow

Using two array values in foreach loop

6 Answers 6

6 Comments

4 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

4 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related