使用 map 后，如何限制和插入从 API 获取请求返回的结果的条件

Question

I am using Fetch with an API after it returns a 1000 objects I want to render only the first 4 or the values with the highest value

I am using.map on the results but I dont know how to put conditions or limit the.map results?

{NowMovies.map(Movie=>(
     <Col  sm="3">
       <Card key={Movie.id}className='Now_Playing' body>
         <CardImg top width="100%" src={`https://image.tmdb.org/t/p/w200${Movie.poster_path}`}
         alt=""/>
         <CardTitle className='title' >{Movie.title}</CardTitle>
         <CardText className='Text'>Rating:{Movie.vote_average}</CardText>
         <Link to={'/movie/' + Movie.id } > <Button color="danger">Visit</Button>{' '}
</Link>
       </Card>
     </Col>```

Answer 1

I'm not sure what you mean with or the values with the highest value , though if you want to take only 4 elements from your array you can use slice . slice can work as a "limit" if you pass 0 as a first argument and number of items you want to obtains as a second argument. eg

let arr = [1,2,3,4,5]
arr.slice(0, 4) // [1,2,3,4]

// if you want to get your items starting from specific position:
arr.slice(1, 5) // [2,3,4,5]

{NowMovies.slice(0,4).map(Movie=>(
     <Col  sm="3">
       <Card key={Movie.id}className='Now_Playing' body>
         <CardImg top width="100%" src={`https://image.tmdb.org/t/p/w200${Movie.poster_path}`}
         alt=""/>
         <CardTitle className='title' >{Movie.title}</CardTitle>
         <CardText className='Text'>Rating:{Movie.vote_average}</CardText>
         <Link to={'/movie/' + Movie.id } > <Button color="danger">Visit</Button>{' '}
</Link>
       </Card>
     </Col>)}

Answer 2

 const NowMovies = []; const MAX_RATING = 10; // This is just a sample JSON array with random ratings between 1-10 in this example for (let i = 0; i < 20; i++) { NowMovies.push({ index: i, rating: Math.floor(Math.random() * MAX_RATING + 1) }); } // This is how you sort your array in descending order by rating, and then return the first N results. 5 in this case. const sortedArray = NowMovies.sort((a, b) => b.rating - a.rating).slice(0, 5); console.log(sortedArray);

You need to write a custom sort method to define how you want to sort your array, like this ^

Then you can slice to return the first N results.

After you have modified your array, you can then use the.map to render the JSX.