so im using fetch to get an object which has film data, how would i get specific data from that object? I have added an example of one of the object which i am using and I can set thing such as the name, genre, cast, trailers, recommendations etc and then map those but what i'm having trouble with is getting the certification as it an array called results. I have got as far as release_dates.results but after that i can't get it to specify 'GB' and then certification.
Object
adult: false
backdrop_path: "/1Rr5SrvHxMXHu5RjKpaMba8VTzi.jpg"
belongs_to_collection: {id: 531241, name: 'Spider-Man (Avengers) Collection', poster_path: '/nogV4th2P5QWYvQIMiWHj4CFLU9.jpg', backdrop_path: '/AvnqpRwlEaYNVL6wzC4RN94EdSd.jpg'}
budget: 200000000
credits: {cast: Array(59), crew: Array(97)}
genres: (3) [{…}, {…}, {…}]
homepage: "https://www.spidermannowayhome.movie"
id: 634649
imdb_id: "tt10872600"
original_language: "en"
original_title: "Spider-Man: No Way Home"
overview: "Peter Parker is unmasked and no longer able to separate his normal life from the high-stakes of being a super-hero. When he asks for help from Doctor Strange the stakes become even more dangerous, forcing him to discover what it truly means to be Spider-Man."
popularity: 7811.558
poster_path: "/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg"
production_companies: (3) [{…}, {…}, {…}]
production_countries: [{…}]
recommendations: {page: 1, results: Array(21), total_pages: 2, total_results: 40}
release_date: "2021-12-15"
release_dates:
results: Array(35)
0: {iso_3166_1: 'DE', release_dates: Array(2)}
1: {iso_3166_1: 'UA', release_dates: Array(1)}
2: {iso_3166_1: 'SK', release_dates: Array(1)}
3: {iso_3166_1: 'MX', release_dates: Array(1)}
4: {iso_3166_1: 'AU', release_dates: Array(1)}
5: {iso_3166_1: 'TR', release_dates: Array(1)}
6: {iso_3166_1: 'HU', release_dates: Array(2)}
7:
iso_3166_1: "GB"
release_dates: Array(1)
0:
certification: "12A"
iso_639_1: null
note: ""
release_date: "2021-12-15T00:00:00.000Z"
type: 3
[[Prototype]]: Object
length: 1
[[Prototype]]: Array(0)
[[Prototype]]: Object
8: {iso_3166_1: 'IT', release_dates: Array(1)}
9: {iso_3166_1: 'AR', release_dates: Array(1)}
10: {iso_3166_1: 'PE', release_dates: Array(1)}
11: {iso_3166_1: 'NZ', release_dates: Array(1)}
12: {iso_3166_1: 'IN', release_dates: Array(1)}
13: {iso_3166_1: 'FI', release_dates: Array(1)}
14: {iso_3166_1: 'CA', release_dates: Array(1)}
15: {iso_3166_1: 'RU', release_dates: Array(1)}
16: {iso_3166_1: 'ES', release_dates: Array(1)}
17: {iso_3166_1: 'PH', release_dates: Array(1)}
18: {iso_3166_1: 'PL', release_dates: Array(1)}
19: {iso_3166_1: 'CZ', release_dates: Array(1)}
20: {iso_3166_1: 'SG', release_dates: Array(1)}
21: {iso_3166_1: 'GR', release_dates: Array(1)}
22: {iso_3166_1: 'TH', release_dates: Array(1)}
23: {iso_3166_1: 'HK', release_dates: Array(1)}
24: {iso_3166_1: 'JP', release_dates: Array(1)}
25: {iso_3166_1: 'IE', release_dates: Array(1)}
26: {iso_3166_1: 'KR', release_dates: Array(1)}
27: {iso_3166_1: 'RO', release_dates: Array(1)}
28: {iso_3166_1: 'BR', release_dates: Array(2)}
29: {iso_3166_1: 'US', release_dates: Array(2)}
30: {iso_3166_1: 'TW', release_dates: Array(1)}
31: {iso_3166_1: 'SE', release_dates: Array(1)}
32: {iso_3166_1: 'NL', release_dates: Array(1)}
33: {iso_3166_1: 'FR', release_dates: Array(2)}
34: {iso_3166_1: 'CH', release_dates: Array(1)}
length: 35
[[Prototype]]: Array(0)
[[Prototype]]: Object
revenue: 1386428198
runtime: 148
spoken_languages: (2) [{…}, {…}]
status: "Released"
tagline: "The Multiverse unleashed."
title: "Spider-Man: No Way Home"
video: false
videos: {results: Array(21)}
vote_average: 8.4
vote_count: 3610
import React, {useState, useEffect} from 'react'
import { useLocation } from 'react-router';
import { Nav} from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStar, faPlay, faHeart, faShare} from '@fortawesome/free-solid-svg-icons'
import {Helmet} from "react-helmet";
import { ScrollCard } from './ScrollCard';
import { Alert } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
export const FilmPage = () => {
const [details, setDetails] = useState([]);
const [genres, setGenres] = useState([]);
const [cast, setCast] = useState([]);
const [trailer, setTrailer] = useState();
const [recommendations, setRecommendations] = useState([]);
const [watch, setWatch] = useState([]);
const location = useLocation();
useEffect( () => {
fetch(`https://api.themoviedb.org/3/movie/${location.state}?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US&append_to_response=release_dates,videos,credits,recommendations®ion=GB`)
.then((res) => res.json())
.then((data) => {
if (!data.errors) {
setDetails(data);
setGenres(data.genres);
setCast(data.credits.cast);
setTrailer(data.videos.results[0]?.key)
setRecommendations(data.recommendations.results)
}else{
<Alert variant="danger">Error</Alert>
}
})
// eslint-disable-next-line
}, [])
useEffect( () => {
fetch(`https://api.themoviedb.org/3/movie/${location.state}/watch/providers?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US®ion=GB`)
.then((res) => res.json())
.then((data) => {
if (!data.errors) {
console.log(data)
setWatch(data.results.GB.flatrate)
}else{
<Alert variant="danger">Error</Alert>
}
})
// eslint-disable-next-line
}, [])
return (
<div>
<Helmet>
<style>{'body { background-color: black; }'}</style>
</Helmet>
<div className='details-container mt' style={{backgroundImage: `url(https://image.tmdb.org/t/p/original/${details.backdrop_path})`}}>
<div className="details-content">
<div className="details-content__poster-container mx-5">
<img className="poster"
src={`https://image.tmdb.org/t/p/w300/${details.poster_path}`}
alt= {details.title}
/>
</div>
<div className="details-content__info">
<div className="header mb-1">
<h3 className="title">{details.title}</h3>
<div className="rating translate-left rounded-pill mx-3">
<FontAwesomeIcon icon={faStar} className="star"/>
{details.vote_average}
</div>
</div>
{genres && (
<div className="genres-container">
{genres.slice(0,3).map(genreName => (
<p className="genres" key={genreName.id}>
{genreName.name}
</p>
))}
</div>
)}
<p className="description">{details.overview}</p>
<div className="card-btn">
<div className="icons">
<a className="details icon-btn mx-2" target="__blank" href={`https://www.youtube.com/watch?v=${trailer}`}><FontAwesomeIcon className='play' icon={faPlay} /> Trailer</a>
<a href className="details icon-btn mx-2"><FontAwesomeIcon icon={faHeart} /></a>
<a href className="details icon-btn mx-2"><FontAwesomeIcon icon={faShare} /> </a>
</div>
</div>
<div className='watch-icons scroller-container'>
<h5>Where To Watch</h5>
{watch && (
<div className='scroller'>
{watch.map(watchProvider => (
<img
className='watch-icons__logo'
src={`https://image.tmdb.org/t/p/original/${watchProvider.logo_path}`}
alt= {watchProvider.provider_name}
/>
))}
</div>
)}
</div>
</div>
</div>
</div>
<div className='scroll-container'>
<h4>Cast</h4>
{cast && (
<div className="scroll-container__content scroller">
{cast.slice(0,22).map(castName => (
<Nav.Link as={NavLink} exact={true} to={{pathname:`/cast/${castName.id}`, state: castName.id }} className="hidden-link" >
<div className="scroll-container__card" key={castName.id}>
<div className="scroll-container__profile">
<img className="scroll-container__img"
src={`https://image.tmdb.org/t/p/w500/${castName.profile_path}`}
alt= {castName.name}
/>
</div>
<div className="scroll-container__name">
<h6 className="name">{castName.name}</h6>
</div>
</div>
</Nav.Link>
))}
</div>
)}
</div>
<div className="scroll-container films">
<h4>Recommended</h4>
{recommendations && (
<div className='scroller' >
{recommendations.slice(0,15).map(movieresults => (
<ScrollCard movieresults={movieresults} key={movieresults.id}/>
))}
</div>
)}
</div>
</div>
)
}
Try this
let GBdata= (Object?.release_dates?.results.filter(x=>x.iso_3166_1==="GB");
console.log(GBdata);