Traversing through pair of arrays simultaneously using forEach loop in JavaScript

Question

Traversing through pair of arrays simultaneously using forEach loop in JavaScript

I am trying to create a for loop that simultaneously iterates through two variables. One is an array named n, and the other, j, ranges from 0 to 16.

var n = [1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22];
var m = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];

m.forEach(k => {
    n.forEach(i => {
        console.log(i, k)
    });
};

The expected output should be:

1,0
2,1
3,2
5,3
(...)

However, the current loop iteration seems to repeat every number 17 times instead of sequentially pairing each element as intended.

Can someone help point out where the issue lies?

javascript for-loop vue.js foreach

Answer 1

Answer №1

Utilize the second parameter provided by forEach, which represents the current index being iterated over:

n = [1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22];

n.forEach((element, index) => {
  console.log(element, index);
});

If you have two separate arrays to start with, in each iteration, access the [index] property of the other array:

var n = [1, 2, 3, 5, 7, 8, 9, 11, 12, 13, 14, 16, 17, 18, 20, 21, 22];
var m = [0, 1, 2, 3, 4, 5, 6, 7,  8,  9,  10, 11, 12, 13, 14, 15, 16];

n.forEach((num1, index) => {
  const num2 = m[index];
  console.log(num1, num2);
});

Answer 2

Utilize the second parameter provided by forEach, which represents the current index being iterated over:

n = [1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22];

n.forEach((element, index) => {
  console.log(element, index);
});

If you have two separate arrays to start with, in each iteration, access the [index] property of the other array:

var n = [1, 2, 3, 5, 7, 8, 9, 11, 12, 13, 14, 16, 17, 18, 20, 21, 22];
var m = [0, 1, 2, 3, 4, 5, 6, 7,  8,  9,  10, 11, 12, 13, 14, 15, 16];

n.forEach((num1, index) => {
  const num2 = m[index];
  console.log(num1, num2);
});

Traversing through pair of arrays simultaneously using forEach loop in JavaScript

Answer №1

Similar questions

I am looking to utilize React and Next.js to map my array from an object. The component is a function employing hooks

What is the best way to apply a CSS class to elements in a Vue.js template when using a v-for

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

Modifying an object using setState in React (solidity event filter)

Encountering an error while trying to run the command "npm run start" due to an issue of "EMFILE

Set up webpack on your Mac using npm

Vue Js image loading issue

Is there a way for me to create a link that is specifically for printing on 3D printers, rather than a link for downloading the

How to retrieve a string from a regular expression in Javascript without [Object object] output

Utilize data obtained from an ajax request located in a separate file, then apply it within a local function

The type 'function that takes in a CustomEvent and returns void' cannot be assigned to a parameter of type 'EventListenerOrEventListenerObject'

Accessing the i and i+1 elements within a ng-repeat iteration

Guide on transforming Div content to json format with the use of jquery

Attention: It is not possible to update the React state on a component that is not mounted. Please use the useEffect cleanup function

Guide to aligning a v-combobox horizontally within a v-col alongside text in vuetify

Is there a way to update the value of a variable with the help of a checkbox?

Unable to select image inside linked container

Webpack Is Having Trouble Parsing My JavaScript Code

Ways to smoothly conclude a loading animation in real-time

Activate video playback when scrolling, but ensure it only occurs one time