英文:
Using Map function inside of another Map function in React Js
问题
我想要使用map函数将流行电影搜索应用的轮播中添加电影类型。我有两个JSON文件,其中一个是包含电影数据的对象数组,其中有一个键作为genre_ids,例如:
genre_ids: 0: 16 1: 28 2: 12 3: 35 4: 10751 5: 14
另一个包含对象数组,指定了具有唯一键的类型名称。例如:
{ "genres": [ { "id": 10759, "name": "Action & Adventure" } ] }
JSON文件:
- 电影数据:https://api.themoviedb.org/3/trending/all/day?api_key=921345714956c7d9c3db36ac3f20ee09
- 类型:https://api.themoviedb.org/3/genre/movie/list?api_key=921345714956c7d9c3db36ac3f20ee09&language=en-US
我尝试首先映射电影数据的JSON。然后在映射类型时,我检查类型的ID是否与电影数据元素的ID匹配。然后返回该特定类型的名称。但它返回了类型JSON中存在的所有类型的名称。
我的代码:
{
trend.map((e, i) => {
return (
<div className="carousel-item" key={i}>
<img
src={`${img}${e.backdrop_path}`}
className="d-block carimage" alt="..." />
<div className="carousel-caption d-none d-md-block">
<div className='caro-discription'>
<button className='trailer-main-button'>More Info!!</button>
<h1>{e.title ? e.title : e.name}</h1>
<h3>Rating: {e.vote_average}/10</h3>
</div>
<div className='genre-list'>
{genre.map((a, b) => {
return (
<h3 className='genre-list-item' key={b}>{a.id === e.genre_ids ? a.name : null}</h3>
)
})}
</div>
</div>
</div>
)
})
}
英文:
I want to add genre to my Movie Search app's carousel using map function. I have two json files one of them is an array of movie data as objects having a key as genre_ids eg:
genre_ids:
0: 16
1: 28
2: 12
3: 35
4: 10751
5: 14
and other contains an array of objects specifying the name of the genre with a unique key. eg:
{
"genres": [
{
"id": 10759,
"name": "Action & Adventure"
}
]
}
The Json files:
- Movie data: https://api.themoviedb.org/3/trending/all/day?api_key=921345714956c7d9c3db36ac3f20ee09
- Genre: https://api.themoviedb.org/3/genre/movie/list?api_key=921345714956c7d9c3db36ac3f20ee09&language=en-US
I tried mapping the json with movie data first. Then while mapping the genre i checked if the id of the genre matches with that of the id of the movie data element. Then I returned the name of that particular genre. But it is returning the names of all the genre present in the genre json.
My code:
{
trend.map((e, i) => {
return (
<div className="carousel-item" key={i}>
<img
src={`${img}${e.backdrop_path}`}
className="d-block carimage" alt="..." />
<div className="carousel-caption d-none d-md-block">
<div className='caro-discription'>
<button className='trailer-main-button'>More Info!!</button>
<h1>{e.title?e.title:e.name}</h1>
<h3>Rating: {e.vote_average}/10</h3>
</div>
<div className='genre-list'>
{genre.map((a,b)=>{
return(
<h3 className='genre-list-item' key={b}>{a.id=e.genre_ids? a.name: null}</h3>
)
})}
</div>
</div>
</div>
)
})
}
答案1
得分: 1
将以下内容进行翻译:
将
<h3 className='genre-list-item' key={b}>{a.id=e.genre_ids? a.name: null}</h3>
改为
<h3 className='genre-list-item' key={b}>{a.id===e.genre_ids? a.name: null}</h3>
英文:
Change
<h3 className='genre-list-item' key={b}>{a.id=e.genre_ids? a.name: null}</h3>
to
<h3 className='genre-list-item' key={b}>{a.id===e.genre_ids? a.name: null}</h3>
答案2
得分: 0
这里有几个你做错的地方。首先是使用map
而不是find
。你的Movie
对象有一个genre_ids
属性,它总是一个正整数。这意味着你不需要映射所有与genre_ids
匹配的流派,而只需要找到电影所标记的特定genre
:
<h3 key={e.genre_ids * e.id}>{genres.find((g, idx) => g.id === e.genre_ids).name}</h3>
如果你有多个流派,那么你会使用map
:
{genres.map((g, idx) => e.genre_ids.includes(g.id) ? <h3 key={e.id * g.id}>{g.name}</h3> : null )}
这样可以节省处理时间。
另外,你的代码存在使用=
进行比较的问题。单个等号用于赋值。如果你想要检查两个值之间的相等性,你应该使用==
。如果你还想检查两者是否具有相同的type
,那么你应该使用===
。
英文:
There are a couple of things you're doing wrong here. First is the use of map
instead of find
. Your Movie
object has one genre_ids
property which is always a positive integer. This means what you don't need to map all genres which match the genre_ids
, instead you just need to find the specific genre
your movie is tagged as:
<h3 key={e.genre_ids * e.id}>{genres.find((g, idx) => g.id === e.genre_ids).name}</h3>
If you do have multiple genres, then you'd use map:
{genres.map((g, idx) => e.genre_ids.includes(g.id) ? <h3 key={e.id * g.id}>{g.name}</h3> : null )}
This way you save processing time.
Also, your code has the issue of using =
for comparison. A single equals sign is used for assignment. If you want to check equality between two values, you'd use ==
. If you want to check if the two are of the same type
as well, you'd use ===
.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论