map first object from api in javascript

Question

I map my arrays via

moviesList.map(movie => <MovieCard movieID={movie} key={movie}

but my API gives sometimes 1 or more results. How can I change my .map to show only the first result?

If you only want the first item then you likely do not want a .map at all. To get the first item you can do moviesList[0] — ruby_newbie
– ruby_newbie, Commented Mar 10, 2020 at 17:36

Abey · Accepted Answer · 2020-03-10 18:13:05Z

1

Try this one

[moviesList[0]].map(movie => <MovieCard movieID={movie} key={movie}

answered Mar 10, 2020 at 18:13

Abey

1313 bronze badges

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

Comments

HelloWorldEngineer · Accepted Answer · 2020-03-11 14:34:31Z

1

First of all, writing moviesList[0].map will make your loop crash if [0] is an object, because it won't be iterable. So you basically need to get rid of all objects but the first one. You can do it with slice(). Here, slice(0,1) means "take all element from 0 to 1 in the array". So only the first object will survive. Then your map() will work like a charm. Also, the key is a basic number "i", obtained from map(), which is better than passing a whole object. If you want to use an object property for a key, please use something like movie.id, and not movies as a whole.

moviesList.slice(0,1).map((movie,i)=> <<MovieCard movieID={movie} key={i}/>)

edited Mar 11, 2020 at 14:34

answered Mar 10, 2020 at 18:09

HelloWorldEngineer

6,42718 gold badges80 silver badges133 bronze badges

Comments

Anurodh Singh · Accepted Answer · 2020-03-10 18:15:12Z

0

Try this,

moviesList[0].map(movie=><MovieCard movieID={movie} key={movie}/> )

Or if you only want to show only one. Try this,

<MovieCard movieID={moviesList[0]} key={moviesList[0]}/>

edited Mar 10, 2020 at 18:15

answered Mar 10, 2020 at 18:13

Anurodh Singh

8106 silver badges9 bronze badges

Collectives™ on Stack Overflow

map first object from api in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related