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

Utilizing Observable Data in Angular 4 TypeScript Components

Creating a simple form page using Express JS

The getelementbyid function is unable to locate the specified button identifier

Is it possible for me to move props object deconstruction into a separate module?

Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

We are creating a table in JavaScript and mistakenly adding an unnecessary tbody

Troubleshooting issue with multer code failing to save files in designated directory within nodejs server when using reactjs frontend

Making adjustments to text in HTML without altering the CSS or styling is proving to be challenging

provide an element reference as an argument to a directive

The attribute 'NameNews' is not recognized in the specified type when running ng build --prod

Is there a method similar to insertBefore that works with arrays and/or HTMLCollections?

Explaining the defineAsyncComponent Method in Vue 3

Issue with Webpack throwing 'window undefined' persists despite using the 'use client' configuration in React/Next.js

Div with sidebar that sticks

Setting up CSS module class names in a Vue project using Vite js configuration

How to Override Certificate Expiry in JavaScript

With the use of discreet JavaScript, the parameter is not empty; instead, it contains values

Unveiling the Power of KnockoutJS: Displaying HTML Content and Populating

AJAX POST request encountered a 400 Bad Request Error

Mongoose documents are set to automatically be deleted after a duration of one month