Using map to iterate through two arrays

Question

Currently in React, I am using array.map(function(text,index){}) to iterate through an array. But, how am I going to iterate through two arrays simultaneously using map?

EDIT

var sentenceList = sentences.map(function(text,index){
            return <ListGroupItem key={index}>{text}</ListGroupItem>;
        })
return (
     <div>
       <ListGroup>
        {sentenceList}
      </ListGrouup>
   </div>
);

Like, in this I want icons to be prepended with every iteration. And I'm planning to have those icons in another array. So, thats why iterate two arrays.

Are you using array.map just to iterate ? What are you doing inside the map function ? — Weedoze
– Weedoze, Commented Mar 21, 2017 at 11:29
What do you mean iterate through two arrays simultaneously? As in you want the mapping function to take (member1, member2) arguments? — Aron
– Aron, Commented Mar 21, 2017 at 11:32
@Aron yes precisely, member 1 for fetching images, member 2 for fetching text. — Aseem Upadhyay
– Aseem Upadhyay, Commented Mar 21, 2017 at 11:39
Are the two arrays guaranteed to have the same number of members? — Aron
– Aron, Commented Mar 21, 2017 at 11:40

Aron · Accepted Answer · 2017-03-21 11:48:03Z

5

If at all possible, I would recommend storing the text alongside the images in an array of objects, eg:

const objects = [{text: 'abc', image: '/img.png' }, /* others */];

that way you can just iterate through the array and select both members at the same time, for example:

objects.map(item => (<Component icon={item.image} text={item.text} />) )

If this isn't possible then just map over one array and access the second array's members via the current index:

sentences.map((text, index) => {
    const image = images[index];
    return (<Component icon={image} text={text} />);
});

answered Mar 21, 2017 at 11:48

Aron

9,3187 gold badges37 silver badges60 bronze badges

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

Comments

Asish Bhattarai · Accepted Answer · 2017-03-21 11:42:28Z

4

Are the both arrays of same length? You can do something like below if your intention is to combine both in some way.

array.map(function(text,index){
   return text + ' ' + array2[index]
})

In your case:

var sentenceList = sentences.map(function(text,index){
            return <ListGroupItem key={index}>{text} <img src={icons[index]} /i> </ListGroupItem>;
        })
return (
     <div>
       <ListGroup>
        {sentenceList}
      </ListGrouup>
   </div>
);

Notice, How Icon src is being assigned. The idea is that access icons array with the same index to get a corresponding icon.

answered Mar 21, 2017 at 11:42

Asish Bhattarai

5021 gold badge4 silver badges13 bronze badges

Comments

eur00t · Accepted Answer · 2017-03-21 11:40:34Z

0

You can't do this with built-in Array.prototype methods, but you can use something like this:

function map2(arr1, arr2, func) {
    return arr1.map(
        (el, i) => { return func(el, arr2[i]); }
    );
}

(Of course, arr1 and arr2 are expected to have the same length)

answered Mar 21, 2017 at 11:40

eur00t

1,55810 silver badges7 bronze badges

Comments

Andrew Ingram · Accepted Answer · 2017-03-21 12:11:09Z

0

Generally, what you're looking for is a zip function, such as the one that lodash provides. Much like a real zipper, it combines two things of the same length into one:

const zipped = _.zip(sentences, icons);

return (
  <div>
    <ListGroup>
      {zipped.map(([sentence, icon], index) => (
        <ListGroupItem key={index}><Icon icon={icon} /> {text}</ListGroupItem>;
      ))}
    </ListGroup>
 </div>
);

Note, this is doing more iterations than are technically needed. If performance is an issue, you may want a solution that's a bit smart (not really in scope for your question though).

answered Mar 21, 2017 at 12:11

Andrew Ingram

5,2402 gold badges28 silver badges37 bronze badges

Collectives™ on Stack Overflow

Using map to iterate through two arrays

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related