所以我使用 fetch 來獲取具有電影資料的物件，我將如何從該物件獲取特定資料？我添加了我正在使用的物件之一的示例，我可以設定名稱、流派、演員表、預告片、推薦等內容，然后映射這些內容，但我遇到的問題是獲得認證一個稱為結果的陣列。我已經release_dates.results做到了，但在那之后我無法讓它指定“GB”然后進行認證。
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>
)
}
uj5u.com熱心網友回復：
試試這個
let GBdata= (Object?.release_dates?.results.filter(x=>x.iso_3166_1==="GB");
console.log(GBdata);
uj5u.com熱心網友回復：
您想用于find遍歷陣列中的所有結果并回傳與條件匹配的第一個結果。速記是這樣的：
const result = data.release_dates.results.find({iso_3166_1} => iso_3166_1 === 'GB')
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/405968.html
標籤：