Map is not a function in arrays inside Objects React - arrays

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.

Related

How to display movie details from json if I clicked particular movie image in React JS?

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

Reactjs filter then map function isn't display images? Is it not re-rendering?

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>)

one block of text coming from database

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>

How to model this NoSQL data structure in Firestore (Review my first approach)

I am a fairly new web developer and would need your help with a project I am currently working on. I have worked in the past on a very simple realtime database example and have little to none experience in firestore or NoSql in general.
I want to create a system which allows end-users to get an email once a week that contains a list of special offers from bars the end-user has subscribed to. The offers change each day of the week. Bar owners can fill out a form in a vue.js web application every week with their weekly special offers.
Every Monday morning a cron job has to look up which end user has subscribed to which bars and then aggregate the data and send it via email.
The question is how would you structure the data so that I can easily compose the email and send it via a cloud function?
My approach would be to have three main collections: RestaurantOwner, EndUser, SpecialOfferings
Please see the graphic for an example process:
BarOwner and EndUser are pretty straight forward. However, the difficult part is how to structure the SpecialOffers in order to be queried the right way.
My idea would be to structure it based on the calendar week and link it to the uid from the barOwner:
specialOffers: {
2019_CW27: {
barUID001: {
mon: {
title: 'Banana Daiquir',
price: 4.99,
},
tue: {
title: 'After Five',
price: 2.99,
},
wed: {
title: 'Cool Colada',
price: 6.99
},
thu: {
title: 'Crantini',
price: 5.99
},
fri: {
title: 'French Martini',
price: 4.99
}
},
barUID002: {
mon: {
title: 'Gin & Tonic',
price: 8.99,
},
tue: {
title: 'Cratini',
price: 4.99,
},
wed: {
title: 'French Martini',
price: 4.99
},
thu: {
title: 'After Five',
price: 3.99
},
fri: {
title: 'Cool Colada',
price: 6.99
}
}
},
2019_CW28: {
barUID01: {~~~},
barUID02: {~~~}
}
}
The disadvantage of this approach is that it creates a deeply nested object when you imagine that there are 52 calendar weeks, f.e 100 signed up bars à 5 special offers per week and I am not sure if I am able to query it the way I need to.
Is this approach reasonable or what would you do differently?
Thank you so much for your help! I highly appreciate it.
I'm assuming the following scenarios:
1) The bar owners make modifications to their offers very often.
2) The bar owners should be the only ones allowed to modify each bar's offers.
If you have these two scenarios, I would recommend a sub-collections approach here.
When to use sub-collections:
1) When there are lot of fields in a document. Cloud Firestore has 20,000 field limit. (If the number of Bars can exceed more than 20,000 fields)
2) When updating the parent collection is a common operation. Firestore only lets you update the document at rate of 1 write/second. (If the SpecialOffers information of each bar is modified very often. If two bar owners modify their offers, only 1 write is successful and the second write operation waits until the first is completed. This can delay the updation offers particularly at the end of a week when almost all the bars update the offers.)
3) When you want to limit the access to particular fields of a document. (If you want to restrict the access to a Bar's Offers to the barOwner alone. You can restrict the access to each document in the Bars sub-collection according to its owner using Firestore Security Rules)
So I would recommend a sub-collection Bars under the main collection SpecialOffers. This way the design becomes scalable and you can add restaurants and super-markets as other similar sub-collections in the future without heavily altering your design.
Another advantage is that sub-collections are basically collections and they don't have a limit for number of documents it can hold. So even if the number of bars registered is above 20,000 which is the limit of number of fields for a fire-store document, your sub-collection wont be having a problem but your document will run out of fields to save the offers for a new bar.
Ultimately the choice depends on your use cases.
Hope this helps.

How do I figure out Data Model for Angular 2/Ionic 2 application

I'm working on a travel application in Angular 2/Ionic 2 with Typescript. I need to figure out how to model my services / objects. This app will have users.
Each user can create an overall Trip. You could name it "Europe 2016." Then you could add multiple days to it. They could be be travelling for 14 days. Each day they can have plans on what to do that day including things like what time the activity is, where that activity is, etc... They could also check the weather, add hotel info, etc to each day.
Roughly may be it looks like (sorry this is ugly)
Trip: {
"name": "Europe 2016",
"tripPlans": [
{"day1": [{plan1: do something, time: 01000}, {plan2: do something else, time: 01000}}], "time": "0800", "date":"09/01"2016, hotel, weather},
{"day2": [{plan1: do something, plan2: do something}], "time": "0800", "date":"09/01"2016, hotel info, weather info}
]
}
Would also need to know the first and last date of trips.
I also may want to go back and query for what the user group find popular, like "most common activity in Gotham"
This is my first major application after spending 100's of hours learning to code and its my personal projects been keeping me excited to learn. It solves a personal problem of mine. I've gotten to the point where I'm having a hard time finding good examples/resources to help me figure this out.
I've sunk a lot of time in to the framework choice so I'd like to stick with it. So far I've landed on trying to use PouchDB/CouchDB. I'm currently only building the mobile version in Ionic right now.
Any advice would be much appreciated even if its github projects to look at, tutorials that you've saved, etc.
I mostly work with CouchDB but I've also started to develop an Ionic app with PouchDB/CouchDB. First of all, you need to know that NoSQL is good when you have a lot of nested documents but sometimes you don't have the choice to make "relations".
First, I reworked a bit your data model :
{
"name": "Europe 2016",
"type": "trip",
"tripPlans": [{
"name": "This is the first plan",
"days": {
"day1": [{
"registeredActivityId": null,
"plan": "do something",
"time": 1000
}, {
"registeredActivityId": "activty_goToTheMoon",
"plan": "Go to the moon and the previous activity",
"time": 1000
}],
"time": "0800",
"date": "09/01/2016",
"hotel": "Hotel name",
"weather": "Sunny"
}
}]
}
Now, you have few options :
You can build a view on your nested actives like this one
function(doc) {
if (doc.type == "trip" && doc.tripPlans && doc.tripPlans.join)
for (var i = 0; i < doc.tripPlans.length; i++) {
var plan = doc.tripPlans[i];
if (plan.days)
for (var n in plan.days)
if (plan.days.hasOwnProperty(n)) {
var day = plan.days[n];
//We emit the activity id for a better tracking.
//If it's not available, we emit the description(not recommanded)
emit(day.registeredActivityId ? day.registeredActivityId : day.plan);
}
}
}
You could make relations between your documents
Using the nested approaches make faster query if the views are calculated often. Else, the "relational approach" makes it easier link "predefined activities" for example. You can contact me in private if you need further pieces of information.

Resources