In my homepage, I am having 15 Movie Cards. If I clicked any particular card, it should display the respective movie details in new page. I am not using any IMDB API to accomplish this. Just trying to fetch the movie details from JSON file.
/TVShows/index.js:
const TvShows = () => {
return (
<div className="tv-shows">
<div className="movies-poster">
<h3>TV Shows</h3>
<ul>
<li><img src={TvShows1} alt={TvShows1} /></li>
<li><img src={TvShows2} alt={TvShows2} /></li>
<li><img src={TvShows3} alt={TvShows3} /></li>
<li><img src={TvShows4} alt={TvShows4} /></li>
<li><img src={TvShows5} alt={TvShows5} /></li>
</ul>
</div>
</div>
);
}
MovieDetails.Json:
{
"Sheet1": [
{
"Id": "1",
"Title": "No Time to Die",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt2382320/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=88C6G5X1N3H7EX2KWG46&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_1",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/no_time_to_die_2021",
"Plot/Storyline-IMDB": "Bond has left active service and is enjoying a tranquil life in Jamaica. His peace is short-lived when his old friend Felix Leiter from the CIA turns up asking for help. The mission to rescue a kidnapped scientist turns out to be far more treacherous than expected, leading Bond onto the trail of a mysterious villain armed with dangerous new technology.—Universal Pictures",
"Summary-imdb": "James Bond has left active service. His peace is short-lived when Felix Leiter, an old friend from the CIA, turns up asking for help, leading Bond onto the trail of a mysterious villain armed with dangerous new technology.",
"Summary-RT": "In No Time To Die, Bond has left active service and is enjoying a tranquil life in Jamaica. His peace is short-lived when his old friend Felix Leiter from the CIA turns up asking for help. The mission to rescue a kidnapped scientist turns out to be far more treacherous than expected, leading Bond onto the trail of a mysterious villain armed with dangerous new technology.",
"Tag_line_IMDB": "Bond is Back\r\nThis April the 25th film will change everything [trailer]\r\nThe mission that changes everything begins.",
"Genre-IMDB": "Action, Adventure, Thriller",
"Genre-RT": "Action, Mystery & Thriller, Adventure",
"Plot-keywords-IMDB": "https://docs.google.com/spreadsheets/d/1oEg3zx-G_-ficrJYh16M6qPOHpmtVl-BpF2WWeGH6ho/edit#gid=0"
},
{
"Id": "2",
"Title": "Dune",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt1160419/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=323BCNV2FR6MA1KDPJX8&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_2",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/dune_2021",
"Plot/Storyline-IMDB": "A mythic and emotionally charged hero's journey, \"Dune\" tells the story of Paul Atreides, a brilliant and gifted young man born into a great destiny beyond his understanding, must travel to the most dangerous planet in the universe to ensure the future of his family and his people. As malevolent forces explode into conflict over the planet's exclusive supply of the most precious resource in existence-a commodity capable of unlocking humanity's greatest potential-only those who can conquer their fear will survive.—Warner Bros.",
"Summary-imdb": "Feature adaptation of Frank Herbert's science fiction novel, about the son of a noble family entrusted with the protection of the most valuable asset and most vital element in the galaxy.",
"Summary-RT": "Paul Atreides, a brilliant and gifted young man born into a great destiny beyond his understanding, must travel to the most dangerous planet in the universe to ensure the future of his family and his people. As malevolent forces explode into conflict over the planet's exclusive supply of the most precious resource in existence, only those who can conquer their own fear will survive.",
"Tag_line_IMDB": "Beyond fear, destiny awaits.",
"Genre-IMDB": "Action, Adventure, Drama, Sci-Fi",
"Genre-RT": "Sci-Fi, Adventure"
},
{
"Id": "3",
"Title": "Free Guy",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt6264654/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=AASC0WBMSY9ZMMPGXW13&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_3",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/free_guy",
"Plot/Storyline-IMDB": "A bank teller discovers that he's actually an NPC inside a brutal, open world video game.",
"Summary-imdb": "A bank teller discovers that he's actually an NPC inside a brutal, open world video game.",
"Summary-RT": "In \"Free Guy,\" a bank teller who discovers he is actually a background player in an open-world video game, decides to become the hero of his own story... one he rewrites himself. Now in a world where there are no limits, he is determined to be the guy who saves his world his way... before it is too late.",
"Tag_line_IMDB": "The world needed a hero.They got a guy.Life's too short to be a background character.Big movie. Big screen. (IMAX release poster)",
"Genre-IMDB": "Action, Adventure, Comedy, Fantasy, Sci-Fi",
"Genre-RT": "Adventure, Comedy, Action"
},
{
"Id": "4",
"Title": "The Many Saints of Newark",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt8110232/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=A2648BX225X5FX5CPXCF&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_4",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/the_many_saints_of_newark",
"Plot/Storyline-IMDB": "Young Anthony Soprano is growing up in one of the most tumultuous eras in Newark's history, becoming a man just as rival gangsters begin to rise up and challenge the all-powerful DiMeo crime family's hold over the increasingly race-torn city. Caught up in the changing times is the uncle he idolizes, Dickie Moltisanti, who struggles to manage both his professional and personal responsibilities and whose influence over his nephew will help make the impressionable teenager into the all-powerful mob boss we'll later come to know: Tony Soprano.",
"Summary-imdb": "Witness the making of Tony Soprano. The story that reveals the humanity behind Tony's struggles and the influence his family - especially his uncle, Dickie Moltisanti - had over him becoming the most iconic mob boss of all time.",
"Summary-RT": "Young Anthony Soprano is growing up in one of the most tumultuous eras in Newark's history, becoming a man just as rival gangsters begin to rise up and challenge the all-powerful DiMeo crime family's hold over the increasingly race-torn city. Caught up in the changing times is the uncle he idolizes, Dickie Moltisanti, who struggles to manage both his professional and personal responsibilities--and whose influence over his impressionable nephew will help make the teenager into the all-powerful mob boss we'll later come to know: Tony Soprano.",
"Tag_line_IMDB": "A Sopranos Story Who Made Tony Soprano",
"Genre-IMDB": "Crime, Drama",
"Genre-RT": "Drama, Crime"
},
{
"Id": "5",
"Title": "Venom: Let There Be Carnage",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt7097896/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=A2648BX225X5FX5CPXCF&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_5",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/venom_let_there_be_carnage",
"Plot/Storyline-IMDB": "Eddie Brock struggles to adjust to his new life as the host of the alien symbiote Venom, which grants him super-human abilities in order to be a lethal vigilante. Brock attempts to reignite his career by interviewing serial killer Cletus Kasady, who becomes the host of the symbiote Carnage and escapes prison after a failed execution",
"Summary-imdb": "Eddie Brock attempts to reignite his career by interviewing serial killer Cletus Kasady, who becomes the host of the symbiote Carnage and escapes prison after a failed execution.",
"Summary-RT": "Eddie Brock is still struggling to coexist with the shape-shifting extraterrestrial Venom. When deranged serial killer Cletus Kasady also becomes host to an alien symbiote, Brock and Venom must put aside their differences to stop his reign of terror.",
"Genre-IMDB": "Action, Adventure, Sci-Fi, Thriller",
"Genre-RT": "Sci-Fi, Adventure, Action, Comedy, Fantasy"
}
]}
/MovieDetail/index.js:
const PageMovieList = ({ movieName, movieStory, duration, genres, year, certification, audioLanguage, subtitles }) => {
return (
<div className='page-movie-list-bg'>
<div className='page-movie-list'>
<h3>{movieName}</h3>
<p>{movieStory}</p>
<div>Duration: {duration}</div>
<div>Genres: {genres}</div>
<div>Year: {year}</div>
<div>Certification: {certification}</div>
<div>Audio Languages: {audioLanguage}</div>
<div>Subtitles: {subtitles}</div>
<div className='play-add-btns'>
<span><FontAwesomeIcon icon={faPlay} /></span>
<span><FontAwesomeIcon icon={faPlus} /></span>
</div>
</div>
</div>
)
}
I recommend you to read about react-router-dom useParams
here is the link to the documentation
https://reactrouter.com/docs/en/v6/getting-started/overview
with that you will be able to detect by id of the movie and it would take you to a new screen with the information
I have a simple filter().map() function:
return (<div>{
result.filter((book)=> book.volumeInfo.matureRating == "NOT_MATURE").map((book=> (
<img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} key={book.id}/>
)))
}</div>)
And I am trying to display the thumbnails for the filtered books. I see in the console log that it is doing just that but it isn't displaying the thumbnails. I am not entirely sure why since I am new to React.
Any advice?
EDIT:
Result returns a JSON object from the Google Books API. Here's a snippit:
allowAnonLogging: true
authors: ["Wendelin Van Draanen"]
averageRating: 4
canonicalVolumeLink: "https://play.google.com/store/books/details?id=LbmL1pKL3dMC"
categories: ["Juvenile Fiction"]
contentVersion: "1.9.6.0.preview.3"
description: "Sometimes it's hard to tell the saints from the sinners... Sammy was supposed to be in church to get out of trouble, not into more. But while she's at St. Mary's working off some school detention time, a valuable cross goes missing and Sammy becomes the prime suspect. She knows she's innocent, and also what it feels like to lose something important. Her treasured catcher's mitt has been stolen--heartless Heather must have taken it to throw Sammy off her game in the upcoming softball play-offs. Trouble is, it's working. Sammy needs that glove back. Throw in nuns in feather boas, a homeless girl in high-tops, a carrot-chomping dog, and a safe that needs cracking, and you've got just another week in the life of Sammy Keyes. Praise for the Sammy Keyes series: “Sammy Keyes is feisty, fearless, and funny. A top-notch investigator!” —New York Times bestselling author Sue Grafton “The sleuth delights from start to finish. Keep your binoculars trained on Sammy Keyes.” —Publishers Weekly “Sammy Keyes is the hottest sleuth to appear in children’s books since Nancy Drew.”—The Boston Globe"
imageLinks: {smallThumbnail: "http://books.google.com/books/content?id=LbmL1pKL3…=frontcover&img=1&zoom=5&edge=curl&source=gbs_api", thumbnail: "http://books.google.com/books/content?id=LbmL1pKL3…=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"}
industryIdentifiers: (2) [{…}, {…}]
infoLink: "https://play.google.com/store/books/details?id=LbmL1pKL3dMC&source=gbs_api"
language: "en"
maturityRating: "NOT_MATURE"
pageCount: 240
panelizationSummary: {containsEpubBubbles: false, containsImageBubbles: false}
previewLink: "http://books.google.com/books?id=LbmL1pKL3dMC&printsec=frontcover&dq=javascript:keyes&hl=&cd=10&source=gbs_api"
printType: "BOOK"
publishedDate: "2008-12-24"
publisher: "Yearling"
ratingsCount: 3
readingModes: {text: true, image: true}
title: "Sammy Keyes and the Sisters of Mercy"
The book.volumeInfo object doesn't have a matureRating. I think you meant to put maturityRating. You're probably getting an empty filtered list as a result.
Change
return (<div>{
result.filter((book)=> book.volumeInfo.matureRating == "NOT_MATURE").map((book=> (
<img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} key={book.id}/>
)))
}</div>)
to
return (<div>{
result.filter((book)=> book.volumeInfo.maturityRating == "NOT_MATURE").map((book=> (
<img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} key={book.id}/>
)))
}</div>)
Im getting Map is not a function in arrays inside Objects in React,
Here is my code:
export const detailProduct = [
{
sku: "price_1HCCiwLjQjzuYZ7H4KhpEqLX",
title: "Tibetan Singing Bowl Set",
price: 29.99,
info: "Tibetan Singing Bowl Set Meditation Bowl",
madeInfo: "3.2 Handmade Meditation Bowl x 1, Hand- sewn Silk Cushion x 1, Mallet covered with leather x 1, creamy white storage bag x 1.A full set of Tibetan Meditation Yoga Singing Bowl with decent price. Our singing bowl can fit in your hand, portable and perfect for on - the - go requirements. CRAFTSMANSHIP - Hand hammered by the craftsmen specializing in Meditation Yoga Singing Bowls.Well - carved symbols and vivid patterns revealed the wholehearted process.Specially hand - sewn silk cushion highlighted the quality of the singing bowl set.",
typeInfo: "PREMIUM QUALITY - Adopting traditional Nepalese craft, made up of seven metals including gold, silver, mercury, copper, iron, tin and lead.",
moreInfo: "EASY TO USE - You can gently tap the mallet to the outside and inside edges of the meditation bowl or play it around the rim to produce the resonant sounds and deep vibrations that can relax your mind and release stress. WIDE APPLICATIONS - Great choice for yoga meditation, sound therapy, spiritual gatherings and stress relief. Ideal for healing from stress disorders, pain, depression and excessive lust. Perfect gifts for your friends, families and sweetheart.",
inCart: false,
images: [
{
url: "/singingbowl2999/1.png"
},
{
url: "/singingbowl2999/2.png"
}
]
}
]
I am having trouble looping over Images array. I get map is not a function. Please help
try doing
detailProduct[0].images.map(image => {
// do what you want in here.
})
My best guess is that you forgot to specify the index in the detailProduct array.
The images you want to access are a part of the object which is at index 0 in the detailProduct array.
Try the following:
detailProduct[0].images.map((image, index) => {
<img key={index} src={require(image.url)} />
})
thank you all I got it. I was doing some tutorial and wanted add extra images. I got it.
I have put paragraphs of text into my mongo database using a mongoose schema. It is a lot of text and it just comes out as one giant block of text on my site page. I have tried including html into the paragraphs but it shows the html and remains as one giant blob of text.
My question is: how do I store paragraphs of text in my database and display them as separate paragraphs? Many thanks in advance.
name: 'Superstar Road Bike',
mainImage: '/public/img/Bikes/Road/Superstar Disc/Superstar.jpeg',
gallery: [ '/public/img/Bikes/Road/Superstar Disc/superstar bottom bracket.jpeg'
, '/public/img/Bikes/Road/Superstar Disc/superstar rear.jpeg'
, '/public/img/Bikes/Road/Superstar Disc/superstar front end.jpeg'
],
description: '<p>Superstar reinterprets at the highest degree of.</p>in carbon fiber, the legendary Italian competition bicycle on the track, the Cinelli that embodies the brands heritage and DNA.Unlike other brands that every year offer bicycles with an increasingly reduced use destination, Cinelli developed Superstar with a meticulous attention to how the intrinsic qualities of carbon fiber and the production processes could be used to create a tremendous edition contemporary of the legendary Italian Grand Tour quality in the saddle: an intelligent balance of lightness, perfect maneuverability on any surface and comfort over long distances.',
price: 39999,
salePrice: 400,
Here is how I am displaying it in my EJS file:
<div id="itemParagraph">
<p> <%= bike.description %> </p>
</div>
<div id="colorSeparator"></div>
I would like for this map method to create one list item for each string but it is bunching them all together.
This is what my output looks like
-Plan and execute content marketing efforts globally to attract, engage and retain high value customersExecute content expansion efforts including incremental content-focused emails, website placements, etc.Coordinate content distribution, digital and social marketing efforts for the Ideas Center and other content related-effortsLead internal writer for new product launch for BizBox powered by Office Depot. Partnered with PWC to produce Beta site
{
id: '2',
position: 'Marketing Lead, High Value Customers & Businesses, Global E-commerce',
tenure: ' 4/17 – 8/17',
duties:['Plan and execute content marketing efforts globally to attract, engage and retain high value customers','Execute content expansion efforts including incremental content-focused emails, website placements, etc.','Coordinate content distribution, digital and social marketing efforts for the Ideas Center and other content related-efforts','Lead internal writer for new product launch for BizBox powered by Office Depot. Partnered with PWC to produce Beta site']
},
{resume.map(resume => {
return <ExperienceCompany id={resume.id} company={resume.company} location={resume.location} tenure={resume.tenure} duties={resume.duties}/>
})}
{props.duties.map(resume => {
return <li id={props.id}>{props.duties}</li>
})}
Hard to tell with the limited context, but you should change the naming in your map callback
{props.duties.map((duty, i) => {
return <li key={i}>{duty}</li>
})}
Currently
In your use of props.duties.map(resume => ..., resume is your abitrary variable name for each element in duties, and it's not being used in your return.