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

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} />); });

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

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.

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

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)

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

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).

Collectives™ on Stack Overflow

Using map to iterate through two arrays

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related