javascript - Limit items in a .map loop - Stack Overflow

admin管理员组

文章数量:1134555

I would like to ask how can I limit my .map loop for example to a 5 items only because currently when I access an api it returns 20 items. but I want to display only 5. Mostly that I found is just looping all throughout the array of objects and not limiting it to a number of items.

Note: I have no control on the API because I'm just using the moviedb api

Here's my code:

var film = this.props.data.map((item) => {
  return <FilmItem key={item.id} film={item} />
});

return film;

I would like to ask how can I limit my .map loop for example to a 5 items only because currently when I access an api it returns 20 items. but I want to display only 5. Mostly that I found is just looping all throughout the array of objects and not limiting it to a number of items.

Note: I have no control on the API because I'm just using the moviedb api

Here's my code:

var film = this.props.data.map((item) => {
  return <FilmItem key={item.id} film={item} />
});

return film;

• javascript

Share Improve this question Follow edited Mar 14, 2019 at 0:10 brooksrelyt 4,02566 gold badges3535 silver badges5757 bronze badges asked Feb 21, 2017 at 18:12 Sydney LoteriaSydney Loteria 10.4k2121 gold badges6262 silver badges7373 bronze badges 0

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 322

You could use Array#slice and take only the elements you need.

var film = this.props.data.slice(0, 5).map((item) => {
        return <FilmItem key={item.id} film={item} />
    });

return film;

If you do not need the original array anymore, you could mutate the array by setting the length to 5 and iterate them.

You could use filter() as well

var film = this.props.data.filter((item, idx) => idx < 5).map(item => {
   return <FilmItem key={item.id} film={item} />
});

return film;

You can also limit it by passing a second argument to a map() callback, which would be an index of an item in the loop.

const film = this.props.data?.map(
  (item, index) => 
    index < 5 && ( // <= only 5 items
      <FilmItem 
        key={item.id} 
        film={item} 
      />
    )
);

return film;

However, you probably should stick to Nina's answer unless you really need some elegancy in your code. Since I'm guessing my answer would be slower performance-wise.

References:

1. MDN: map() syntax
2. Optional Chaining

Hi, If you are using a functional component. you can try this:

<p>const [film, setFilm] = useState([])</p>

<i>// Fetch data from API</i>

<p>useEffect(() =>{...})</p>

var fiveFilm = film.slice(0,5)

in your return function:

you can map using:

{fiveFilm.map(item => <p>{item.name}<p>)}

here is the way you can limit items using map function.

const result = array.map((value, index) => {
        // * need only 10 items
        if (index >= 10) {
            return;
        }

        return <div key={index}>Text</div>;
    });

本文标签： javascriptLimit items in a map loopStack Overflow