Multiple arrays in loop structure

Question

I cannot think of a way to loop through two arrays at the same time. This code is for outputting a function's data to different divs on a page. array1 defines the input and array2 defines the output.

How can I loop through the two arrays so that item1 will always be paired with '#div1', item2 with '#div2', etc.

var array1=[item1 , item2, item3, item4];
var array2=['#div1', '#div2', '#div3', '#div4'];

for (var i = 0; i < array1.length; i++) {

    //code for to populate data goes here

    item.appendTo($(array2[i]));
};

Am I at least correct in wrapping my function in a for loop?

Thank you!

Since both arrays are of the same length and in the correct order, you can use the loop variable `i` to access both arrays, `array1[i]` and `array2[i]`. — Felix Kling, Feb 28 '13 at 20:07
Do you mean like this? `for (var i = 0; i<3; i++) {` It is outputting everything to the last item in the first array. — user2062244, Feb 28 '13 at 20:42
No, you can keep `for (var i = 0; i < array1.length; i++) {`, you don't have to change anything. You just have to use `i` to access `array1` like you do with `array2`. I think you are over-thinking this. There is really nothing extraordinary to do in this situation. — Felix Kling, Feb 28 '13 at 20:54

DanC · Accepted Answer · 2013-02-28T20:47:12.767

0

var array1=[item1 , item2, item3, item4];
var array2=['#div1', '#div2', '#div3', '#div4'];

for (var i = 0; i < array1.length; i++) {

    //code for to populate data goes here

    $(array1[i]).appendTo(array2[i]);

};

edited Feb 28 '13 at 20:47

answered Feb 28 '13 at 20:05

DanC

8,595
9
42
64

The `item` in this section `item.appendTo($(array2[i]));` is part of the function, so I am trying to append the `item` to the div in `array2` – user2062244 Feb 28 '13 at 20:44
Instead of using appendTo(), the same effect would be achieved using append() this way: $(array2[i]).append(array1[i]); – DanC Feb 28 '13 at 20:48
I guess I am still not understanding since I would like to output `item` to a div stored in the array. – user2062244 Feb 28 '13 at 21:00
If `itemX` contains plain text, then this won't work. You cannot pass plain text to jQuery. You have to use the earlier version then, with `.append`. – Felix Kling Feb 28 '13 at 21:12
@user2062244: I don't understand where your problem is. `array2[i]` is a string containing a selector and `array1[i]` is some data. You want to append the data to the element matched by the selector, hence you pass `array2[i]` to jQuery and pass `array1[i]` to `.append`. Here is an example: http://jsfiddle.net/bgE7Z/. What do you still not understand? You don't seem to accept any solution and keep explaining what you are trying to do instead. If the solutions don't work for you, you have to explain *why* and maybe provide a better explanation of your problem as well. – Felix Kling Feb 28 '13 at 21:15
Sorry. You're right, I should've explained myself more clearly.. this is essentially what I am trying to do: http://jsfiddle.net/curly33/vRv7N/ I am trying to output data from different urls to different divs. Content from a url would be placed in a div according to its position in the array. I guess what I am having trouble with is outputting the scraped table data to a div in the second array. Line 23 is the output. – user2062244 Feb 28 '13 at 22:12
@user2062244: So I assumed you tried `output[i]` and didn't see anything? That's because you create closures (the success callbacks) inside the loop, and at the moment they are executed, the variable `i` has the value `3` (and `output[3]` is `undefined`). You have to capture the current value of `i` in each iteration. How this can be done is explained here: http://stackoverflow.com/q/750486/218196. The this is what you get: http://jsfiddle.net/vRv7N/1/. – Felix Kling Feb 28 '13 at 23:24
That was the solution! Thank you so much. Thank you for the explanation link also. I had no idea. – user2062244 Mar 01 '13 at 15:15

kamituel · Answer 2 · 2013-02-28T20:41:12.143

0

You can just iterate over two arrays at once. For security, just check if your index variable ('i') is not exceeding any of both arrays length.

Here's an example:

var array1=[item1 , item2, item3, item4];
var array2=['#div1', '#div2', '#div3', '#div4'];

var array3 = [];
for ( var i = 0; i < array1.length && i < array2.length; i++ ) {
    array3.push({
        el1: array1[i],
        el2: array2[i]
    });
}

for ( var i = 0; i < array3.length; i++ ) {
  // array3[i].el1; -- element from array1
  // array3[i].el2; -- element from array2
}

You can do this in one loop, of course. Here I've gone with two just for clarity (second one is logging only).

edited Feb 28 '13 at 20:41

answered Feb 28 '13 at 20:11

kamituel

34,606
6
81
98

Unfortunately, this has to support IE8, so `Array.map` will not work. – user2062244 Feb 28 '13 at 20:30
You can chose not to use IE8, no problem. I'll update the answer in a sec. – kamituel Feb 28 '13 at 20:36

score 0 · Answer 3 · answered Feb 28 '13 at 20:11

0

Using the $() creates a jQuery object. You probably want to be creating the jQuery object off of the array2 values. When using a for loop the i variable will increment and you can use this to access the array members. Since you want the same index of both arrays using this for loop should work well

var array1=[item1 , item2, item3, item4];
var array2=['#div1', '#div2', '#div3', '#div4'];

for (var i = 0; i < array1.length; i++) {
    $(array2[i]).append(array1[i]); 
};

answered Feb 28 '13 at 20:11

JBone

3,163
11
36
47

The `item` in this section `item.appendTo($(array2[i]));` is part of the function, so I am trying to append the `item` to the div in `array2` – user2062244 Feb 28 '13 at 20:45

Multiple arrays in loop structure

3 Answers3