score:0
You can do something like this:
let genres = [{
"id": 28,
"name": "Action"
},
{
"id": 12,
"name": "Adventure"
}]
I have a working example of code which returns all the matching genres name according to genre_ids
class TheTmdbApp extends React.Component {
constructor(props) {
super(props)
this.state = {
movies : [ {
"popularity": 59.54,
"vote_count": 792,
"video": false,
"poster_path": "\/8j58iEBw9pOXFD2L0nt0ZXeHviB.jpg",
"id": 466272,
"adult": false,
"backdrop_path": "\/kKTPv9LKKs5L3oO1y5FNObxAPWI.jpg",
"original_language": "en",
"original_title": "Once Upon a Time in Hollywood",
"genre_ids": [28, 35, 80, 18, 37],
"title": "Once Upon a Time in Hollywood",
"vote_average": 7.6,
"overview": "A faded television actor and his stunt double strive to achieve fame and success in the film industry during the final years of Hollywood's Golden Age in 1969 Los Angeles.",
"release_date": "2019-07-26"
}, {
"popularity": 45.265,
"vote_count": 526,
"video": false,
"poster_path": "\/hgWAcic93phg4DOuQ8NrsgQWiqu.jpg",
"id": 452832,
"adult": false,
"backdrop_path": "\/oOROXoQ402tHgK6NowmMUSLffkW.jpg",
"original_language": "en",
"original_title": "Serenity",
"genre_ids": [9648, 53],
"title": "Serenity",
"vote_average": 5.2,
"overview": "Baker Dill is a fishing boat captain leading tours off a tranquil, tropical enclave called Plymouth Island. His quiet life is shattered, however, when his ex-wife Karen tracks him down with a desperate plea for help.",
"release_date": "2019-01-25"
}, {
"popularity": 50.454,
"vote_count": 113,
"video": false,
"poster_path": "\/vOl6shtL0wknjaIs6JdKCpcHvg8.jpg",
"id": 567609,
"adult": false,
"backdrop_path": "\/aNrNi5QExO6b8MnEGsfpgp21NIY.jpg",
"original_language": "en",
"original_title": "Ready or Not",
"genre_ids": [27, 9648, 53],
"title": "Ready or Not",
"vote_average": 7.5,
"overview": "A bride's wedding night takes a sinister turn when her eccentric new in-laws force her to take part in a terrifying game.",
"release_date": "2019-08-21"
}, {
"popularity": 46.348,
"vote_count": 2284,
"video": false,
"poster_path": "\/wgQ7APnFpf1TuviKHXeEe3KnsTV.jpg",
"id": 447404,
"adult": false,
"backdrop_path": "\/nDP33LmQwNsnPv29GQazz59HjJI.jpg",
"original_language": "en",
"original_title": "Pokémon Detective Pikachu",
"genre_ids": [28, 12, 14],
"title": "Pokémon Detective Pikachu",
"vote_average": 7,
"overview": "In a world where people collect pocket-size monsters (Pokémon) to do battle, a boy comes across an intelligent monster who seeks to be a detective.",
"release_date": "2019-05-10"
}, {
"popularity": 33.986,
"vote_count": 45,
"video": false,
"poster_path": "\/vVYU0x9FRpiJNX7c54ciFnRBVYG.jpg",
"id": 441282,
"adult": false,
"backdrop_path": "\/6rJAeP8xlq0bHUdCNg5epBvrFVa.jpg",
"original_language": "en",
"original_title": "Night Hunter",
"genre_ids": [80, 9648, 53],
"title": "Night Hunter",
"vote_average": 6.1,
"overview": "A police task force traps an online predator, only to discover that the depth of his crimes goes far beyond anything they had anticipated.",
"release_date": "2019-09-06"
}, {
"popularity": 48.493,
"vote_count": 1054,
"video": false,
"poster_path": "\/f4FF18ia7yTvHf2izNrHqBmgH8U.jpg",
"id": 504608,
"adult": false,
"backdrop_path": "\/oAr5bgf49vxga9etWoQpAeRMvhp.jpg",
"original_language": "en",
"original_title": "Rocketman",
"genre_ids": [18, 10402],
"title": "Rocketman",
"vote_average": 7.5,
"overview": "The story of Elton John's life, from his years as a prodigy at the Royal Academy of Music through his influential and enduring musical partnership with Bernie Taupin.",
"release_date": "2019-05-31"
}, {
"popularity": 46.85,
"vote_count": 3,
"video": false,
"poster_path": "\/eU0orGizEpOli4wtN8HtfOOJDlA.jpg",
"id": 516700,
"adult": false,
"backdrop_path": "\/nmHCKQ1GtlPLZVAtBfsYDqVPhPW.jpg",
"original_language": "id",
"original_title": "Gundala",
"genre_ids": [28, 80, 18],
"title": "Gundala",
"vote_average": 8.2,
"overview": "Sancaka has lived on the streets since his parents left him. Living a hard life, Sancaka survives by thinking about his own safety. When the condition of the city gets worse and injustice rages throughout the country, Sancaka must decide whether he continues to live to look after himself or rise to become their oppressed hero.",
"release_date": "2019-08-29"
}],
genres :
[
{
"id": 28,
"name": "Action"
},
{
"id": 12,
"name": "Adventure"
},
{
"id": 16,
"name": "Animation"
},
{
"id": 35,
"name": "Comedy"
},
{
"id": 80,
"name": "Crime"
},
{
"id": 99,
"name": "Documentary"
},
{
"id": 18,
"name": "Drama"
},
{
"id": 10751,
"name": "Family"
},
{
"id": 14,
"name": "Fantasy"
},
{
"id": 36,
"name": "History"
},
{
"id": 27,
"name": "Horror"
},
{
"id": 10402,
"name": "Music"
},
{
"id": 9648,
"name": "Mystery"
},
{
"id": 10749,
"name": "Romance"
},
{
"id": 878,
"name": "Science Fiction"
},
{
"id": 10770,
"name": "TV Movie"
},
{
"id": 53,
"name": "Thriller"
},
{
"id": 10752,
"name": "War"
},
{
"id": 37,
"name": "Western"
}
]
}
}
getMovieGenreName(genre_ids){
let genreIds = []
let genreNames = []
let genres = ""
this.state.genres.forEach((genre,index) => {
genreIds[index] = genre.id;
genreNames[index] = genre.name;
});
genre_ids.forEach((genre) => {
let genreIndex = genreIds.indexOf(genre);
let genreName = genreNames[genreIndex];
genres += genreName + ' . ';
})
genres = genres.slice(0, -2);
return genres
}
render() {
return (
<div>
{this.state.movies.map(movie => {
return (
<div>
<h4>{movie.title}</h4>
<span>Genres: {this.getMovieGenreName(movie.genre_ids)}</span>
</div>
)
})}
</div>
)
}
}
ReactDOM.render(<TheTmdbApp />, document.querySelector("#app"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id="app"></div>
</body>Hope this helps, Happy Coding...!!!
score:0
You can simply do it unsing the forEach loop and using includes() method ,
Here is code snippet
var genres = [
{
"id": 28,
"name": "Action"
},
{
"id": 12,
"name": "Adventure"
},
{
"id": 16,
"name": "Animation"
},
{
"id": 35,
"name": "Comedy"
},
{
"id": 80,
"name": "Crime"
},
{
"id": 99,
"name": "Documentary"
},
{
"id": 18,
"name": "Drama"
},
{
"id": 10751,
"name": "Family"
},
{
"id": 14,
"name": "Fantasy"
},
{
"id": 36,
"name": "History"
},
{
"id": 27,
"name": "Horror"
},
{
"id": 10402,
"name": "Music"
},
{
"id": 9648,
"name": "Mystery"
},
{
"id": 10749,
"name": "Romance"
},
{
"id": 878,
"name": "Science Fiction"
},
{
"id": 10770,
"name": "TV Movie"
},
{
"id": 53,
"name": "Thriller"
},
{
"id": 10752,
"name": "War"
},
{
"id": 37,
"name": "Western"
}
];
popularMovies=[{
"popularity": 507.672,
"vote_count": 224,
"video": false,
"poster_path": "/zfE0R94v1E8cuKAerbskfD3VfUt.jpg",
"id": 474350,
"adult": false,
"backdrop_path": "/4W0FnjSGn4x0mKZlBRx8OjFxQUM.jpg",
"original_language": "en",
"original_title": "It Chapter Two",
"genre_ids": [
35,
27
],
"title": "It Chapter Two",
"vote_average": 7.2,
"release_date": "2019-09-06"}]
var arr = []
genres.forEach(function(singleObject){
popularMovies.forEach(function(objectToMatch){
if(objectToMatch.genre_ids.includes(singleObject.id)){
arr.push(singleObject.name);
}
})
})
console.log(arr);
In arr you will have name off genres .
This will help you .
score:0
popularMovies=[{
"popularity": 507.672,
"vote_count": 224,
"video": false,
"poster_path": "/zfE0R94v1E8cuKAerbskfD3VfUt.jpg",
"id": 474350,
"adult": false,
"backdrop_path": "/4W0FnjSGn4x0mKZlBRx8OjFxQUM.jpg",
"original_language": "en",
"original_title": "It Chapter Two",
"genre_ids": [
35,
27
],
"title": "It Chapter Two",
"vote_average": 7.2,
"release_date": "2019-09-06"}]
these arrays are in state
import React, { Component } from 'react'
import store from '../../store'
export class genre extends Component {
constructor(props){
super(props)
this.state={
genre:[],
popularMovies:[],
}
store.subscribe(() => {
// When state will be updated(in our case, when items will be fetched),
// we will update local component state and force component to rerender
// with new data.
this.setState({
popularMovies: store.getState().popularMovies.movies,
genre:store.getState().genresIds.genreIds
},()=>{
if (!this.state.genre ) {
return;
}
this.state.popularMovies.map((movie)=>{
let genreList = [];
movie.popularity.genre_ids.map((id)=>{
let find = genre.filter((el) => {
return el.id === id
});
if (find.length > 0) {
genreList.push(find[0])
}
})
console.log(genreList)
))
}
console.log(this.state.genre);
});
});
}
render() {
return (
<div>
</div>
)
}
}
export default genre
Source: stackoverflow.com
Related Query
- How to use for loop in react so I can loop over two array and return the object in second array if both match
- How to map over an object which has a unique id for each object values and return the values to a React component
- In React How can I fetch data and render a single object in a states array without mapping the whole thing?
- How can I pass a value from the backend to a React frontend and use that value in the CSS for the frontend?
- How do I iterate over an array of objects match a common element from another array and return the key value for "name"
- How can i get values from multiple input boxes on form submit and store the values as an object in an state array for React?
- how can i loop through the array inside of an object. and render it in the react component
- How can I access two separate images in an array of objects and assign it to a third object inside the same array?
- How to loop through an array and display data within the object of that array, in react and javascript
- How can I scan through the list of string array items to identify which part matches regex expression for url and convert it to link w react typescri
- useState hook can only set one object at the time and return the other object of the same array to initial state
- How can I use an IIFE in the return function of a react component?
- How to use the same port for React Js and Node Js?
- How do we return a Promise from a store.dispatch in Redux - saga so that we can wait for the resolve and then render in SSR?
- How do i iterate over an array of object in react.js and add the values of prices in the object as shown below
- How can i get array of object from this data for state and count in reactjs
- How can I use Promise.all on an array of objects and then reassign them to the relevant key in a new object?
- How can I use useEffect in React to run some code only when the component first mounts, and some other code whenever an event occurs (repeatedly)?
- How react functional component can use object variable which declared behind the usage? (include example)
- React : how to pass and array from inside a Function to the return (JSX)
- How can I render the contents of an array nested inside an object in React Admin's show/ArrayField component?
- How to find most recent date from an array of object then add new field and return array in react
- How to map over 2 Array of object in React and render to Table
- I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
- how do i update state in react for updating the value of an object inside an array using array.map function
- How to loop through an array of strings backwards x amount of times and start over when the end is reached?
- How to return the data in one function call for two different object keys
- How to loop over images array and render them in a component for React?
- Loop through array of objects, check for a matching parameter and add the matching object to new array
- How to loop an object that is inside an array and is inside an object? React
More Query from same tag
- Fetching Data from API using UseEffect
- Showing API Information with JSX on render with Fetch API React
- React JSX error : Unclosed regular expression
- React input placeholder - type-writer animation?
- Flowtype error with react: This type is incompatible with props of JSX Intrinsic
- Compile error when running app with cordova after installing firebase plugins
- Fontawesome icons React
- React.lazy() vs React Loadable
- Warning: Failed propType: Invalid prop 'component' supplied to 'route'
- Why is this method not being called properly?
- Reactjs - Call parent method in child component
- React router is not loading component on Redirect
- React nested Map and Filter (filter out duplicates)
- Avoid re-rendering of a component because of a custom hook which is used by other components?
- How to break loop after 2nd element on react js inside map function
- How to animate a conditionally rendered part of the component on state change using javascript and css?
- How to use dynamic import one time only with NextJS
- (React) How to access a specific element that is being mapped and returned?
- MaterialUI + React Testing Library: Unit test Select MenuItem breaks after upgrading to version 4
- React native + redux populate store with data before any Component render
- Reactjs routes, link over params
- React - error result map is not a function?
- Axio's request gets an empty response from Node.js
- React add images to existing map
- some question about redux-toolkit redux-saga
- Jest says SyntaxError: Unexpected token export - React, Material.io
- How to group by with two field in Javascript
- How to convert a blob file to a specific format?
- Using onclick in React - requires being defined?
- how to insert data in React js
