I am trying to map an array of objects within an object and I can't seem to get it working. My code's goal is to map and then display the content within the "menu" array.
Here is the structure of the object (logged to console from a state).
Object {
"id": 1,
"img": "https://cuisinederue.org/wp-content/uploads/2019/08/Greg2.png",
"menu": Array [
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Greg's Burger",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Poutine double cheese bacon",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Cône de poulet pop corn et frites maison",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Grilled cheese Philly steak",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Poutine Philly cheese steak",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Boulette de mac'n'cheese",
"price": 1,
},
],
"name": "Greg's dinner",
"type": "SOUTHERN COMFORT",
}
And here is the code that I'm trying to get to work: (specifically the details.menu.map part)
const Details = ({navigation, idTruck}) =>{
const [details, setDetails] = useState([]);
const [detailsDone, setDetailsDone] = useState(false);
const getDetails = () => {
fetch("https://foodtrack-420kbc-lg.herokuapp.com/trucks/1").then(res => res.json()).then(resp => setDetails(resp));
}
if(!detailsDone)
{
getDetails();
setDetailsDone(true);
}
console.log(details);
return (
<View style={styles.container}>
<Header title='Details'></Header>
<Image name="logo" style={styles.detailsImage} source={{uri: details.img}}></Image>
<Text name="nom">{details.name}</Text>
<Text name="style">{details.type}</Text>
{
details.menu.map(({description, name, price}) =>
<View style={styles.container}>
<Text name="nom">{name}</Text>
<Text name="prix">{price}</Text>
<Text name="desc">{description}</Text>
</View>
)
}
</View>
)
}
The error I am getting is: TypeError: undefined is not an object (evaluating 'details.menu.map'
Any help is greatly appreciated!
You have big problem in controlling JS asynchronous. Please try to understand it first before you start to study reactJS. Some async functions: setTimeout, setInterval, Ajax (call api), here is small tut . From this point, you don't need to use detailsDone state.
High performance when use useEffect for calling api only 1 time.
const initValue = {
id: 0,
name: "",
type: "",
img: "",
menu: []
}
const [details, setDetails] = useState(initValue); // init value is object, not array
React.useEffect(() => {
fetch("https://foodtrack-420kbc-lg.herokuapp.com/trucks/1")
.then(res => res.json())
.then(resp => setDetails(resp));
}, []); // ensure call api run 1 time when this component render.
it looks like you're trying to map over details.menu, but when the component loads initially, details is an empty array, which does not have property menu.
One workaround would be to conditionally render something else (like a loading indicator) until the data is set into component state.
Related
I am using List from 'react-native-paper' to display an order list. when I click on the order, 'displays the order total and the products.
I added:
left = {product.quantity}
so that on the left of the products I have the quantity of the products displayed.
However, this line gives me an error:
TypeError: 1 is not a function (near '... left ...')
My data array looks like this:
[ Object {
"amount": 2671.25,
"balance": 0,
"client_id": 1,
"created_at": "2020-05-06T17:42:26Z",
"discount": 0,
"discount_type": 0,
"id": 19,
"items": Array [
Object {
"cost": 2400,
"currency": "EUR",
"description": "",
"name": "Apple MacBook Air 15'' LED 500 Go SSD 32 Go",
"product_id": 5,
"quantity": 1,
"tax_rate_id": 1,
},
Object {
"cost": 54.25,
"currency": "EUR",
"description": "L’agrafeuse pince Rapid Maxi SP19 est conçue pour agrafer tous vos documents en toute simplicité. Ce modèle est capable d’agrafer jusqu’à 20 feuilles en une seule fois. Léger, il assure une prise en main agréable et facile. Robuste, cette agrafeuse convient à un usage fréquent pour les travaux d’emballage et de bureau. Elle peut contenir jusqu’à 210 agrafes SP19/6. Pratique, le stock d’agrafes est visible sur le côté pour que vous puissiez recharger l’agrafeuse à temps. Le chargement s'effectue facilement par l’arrière. Cet article est disponible en deux couleurs : chrome et rose. Il est livré avec 200 agrafes.",
"name": "Agrafeuse pince Rapid Maxi SP 19 – capacité de 20 feuilles",
"product_id": 2,
"quantity": 5,
"tax_rate_id": 4,
},
],
"po_number": "",
"public_notes": "TEST 6 : Acomptes",
"quote_date": "2020-05-06",
"quote_number": "D1460019",
"quote_status": 40,
"terms": "",
"updated_at": "2020-05-06T18:08:06Z", },
I hope you can guide me to find out what is wrong. Thank you And this is my code;
<ScrollView>
{this.state.displayArray !== null && this.state.displayArray.length > 0 ? (
this.state.displayArray.map((item, i) => (
<List.Section title={item.created_at.substring(0, 10)} titleStyle={{fontSize: 16, color: '#013243'}} key={i.toString()}>
<List.Accordion
title={item.quote_number}
style={{width: '98%'}}
left={props => <List.Icon {...props} color={'#F78400'} icon={require('../../../assets/images/logo-weecoop.png')} />}>
<List.Item titleStyle={{color: '#F78400'}} title={`Total: ${item.amount} €`}/>
{
item.items.map((product, i) => (
<List.Item
title={product.name.substring(0, 30)}
titleStyle={{fontSize: 14}}
description={product.description}
descriptionStyle={{fontSize: 11}}
descriptionNumberOfLines={4}
key={i.toString()}
left={product.quantity}
/>
))
}
</List.Accordion>
</List.Section>
))
) : (
<View style={styles.container}>
<Text>{"\n\n" + (this.state.displayArray === null ? i18n.t("orders.search") : i18n.t("orders.nodata")) + "\n\n\n"}</Text>
<Button
color="#F78400"
title= 'Back'
onPress={() => this.props.navigation.goBack()}>BACK
</Button>
</View>
)}
</ScrollView>
);
}
}
You are passing product.quantity to left
But the documentation says
left Type: (props: { color: string; style: { marginLeft: number;
marginRight: number; marginVertical?: number; }; }) => React.ReactNode
Callback which returns a React element to display on the left side.
https://callstack.github.io/react-native-paper/list-item.html#left
If you want to show the quantity in the left you should do
left={()=>(<Text>product.quantity<Text>)}
I am trying to map through some data and display the values from the objects I am mapping through, but it keeps return "[object Object]", usually I just wrap it in JSON.stringify but that isn't working here, what am I doing wrong? Here's my code:
const ListingItem = (props: any) => {
const MOVIE_POSTER_API_URL = "https://image.tmdb.org/t/p/w92/";
const [openMovieDbData, setOpenMovieDbData] = useState<Array<any>>([]);
const [openMovieDbRatings, setOpenMovieDbRatings] = useState([]);
useEffect((): any => {
axios.get(`http://www.omdbapi.com/?t=${props.movie.title}&y=${props.movie.release_date && props.movie.release_date.substr(0, 4)}&apikey=${process.env.REACT_APP_OPEN_MOVIE_API_KEY}`)
.then(response => {
setOpenMovieDbData(response.data);
setOpenMovieDbRatings(response.data.Ratings);
})
.catch((error) => console.log('Open Movie DB HTTP GET Request Error response:', error))
}, [])
return (
<ListItem key={props.movie.id}>
{props.movie.backdrop_path ?
<ListItemAvatar>
<Avatar src={MOVIE_POSTER_API_URL + props.movie.backdrop_path} />
</ListItemAvatar> :
<ListItemIcon>
<Avatar>
<LocalMoviesIcon />
</Avatar>
</ListItemIcon>
}
<ListItemText
primary={props.movie.title}
secondary={`${props.movie.overview} Released in ${props.movie.release_date ? props.movie.release_date.substr(0, 4) : 'N/A'}
${openMovieDbRatings ? openMovieDbRatings.map((rating: any) => <div>{JSON.stringify(rating.Source)}: {JSON.stringify(rating.Value)}</div>) : 'No Reviews'}
Rated: ${openMovieDbData['Rated'] ? openMovieDbData['Rated'] : 'N/A'}
`
}
/>
</ListItem>
)
}
This is an example of what will get returned, in place of [object Object] should be the object values I am trying to access:
Example of response data:
{
"Title": "Braveheart",
"Year": "1995",
"Rated": "R",
"Released": "24 May 1995",
"Runtime": "178 min",
"Genre": "Biography, Drama, History, War",
"Director": "Mel Gibson",
"Writer": "Randall Wallace",
"Actors": "James Robinson, Sean Lawlor, Sandy Nelson, James Cosmo",
"Plot": "Scottish warrior William Wallace leads his countrymen in a rebellion to free his homeland from the tyranny of King Edward I of England.",
"Language": "English, French, Latin, Scottish Gaelic, Italian",
"Country": "USA",
"Awards": "Won 5 Oscars. Another 28 wins & 33 nominations.",
"Poster": "https://m.media-amazon.com/images/M/MV5BMzkzMmU0YTYtOWM3My00YzBmLWI0YzctOGYyNTkwMWE5MTJkXkEyXkFqcGdeQXVyNzkwMjQ5NzM#._V1_SX300.jpg",
"Ratings": [{
"Source": "Internet Movie Database",
"Value": "8.3/10"
}, {
"Source": "Rotten Tomatoes",
"Value": "78%"
}, {
"Source": "Metacritic",
"Value": "68/100"
}],
"Metascore": "68",
"imdbRating": "8.3",
"imdbVotes": "944,923",
"imdbID": "tt0112573",
"Type": "movie",
"DVD": "N/A",
"BoxOffice": "N/A",
"Production": "Icon Entertainment International, Twentieth Century Fox, Ladd Company, Paramount Pictures, B.H. Finance C.V.",
"Website": "N/A",
"Response": "True"
}
i think the issue is here,
secondary={`${props.movie.overview} Released in ${props.movie.release_date ? props.movie.release_date.substr(0, 4) : 'N/A'}
${openMovieDbRatings ? openMovieDbRatings.map((rating: any) => <div>{JSON.stringify(rating.Source)}: {JSON.stringify(rating.Value)}</div>) : 'No Reviews'}
Rated: ${openMovieDbData['Rated'] ? openMovieDbData['Rated'] : 'N/A'}
`}
#1: (main)
${openMovieDbRatings
? openMovieDbRatings.map((rating: any) =>
<div>{JSON.stringify(rating.Source)}: {JSON.stringify(rating.Value)}</div>
)
: 'No Reviews'}
You are mapping openMovieDbRatings and making em ReactElements (aka Objects) by wrapping those inside divs. But, Then u directly pass them to string. This is causing the [object object] thing
#2:
The Rating Object,
"Ratings": [{
"Source": "Internet Movie Database",
"Value": "8.3/10"
}, {
"Source": "Rotten Tomatoes",
"Value": "78%"
}, {
"Source": "Metacritic",
"Value": "68/100"
}],
Here, The Rating Value & Source are strings. So, it unnecessary to JSON.stringify them,
<div>{JSON.stringify(rating.Source)}: {JSON.stringify(rating.Value)}</div>
My Solution,
<ListItemText
primary={props.movie.title}
secondary={
<>
{props.movie.overview} Released in{' '}
{props.movie.release_date
? props.movie.release_date.substr(0, 4)
: 'N/A'}{' '}
{openMovieDbRatings
? openMovieDbRatings.map((rating: any) => (
<div>
{rating.Source}: {rating.Value}
</div>
))
: 'No Reviews'}
Rated:{' '}
{openMovieDbData['Rated'] ? openMovieDbData['Rated'] : 'N/A'}
</>
}
/>
Simply, use React.Fragments.
I need to retrieved a index inside a JSON data.
My query -> I want to get the position of the URL who contains the text "eisf" inside all the URL's.
I tried the function findIndex, but not working...
[{
"title": "CAP Pâtissier à La Ciotat - GRETA Marseille Méditerranée - Académie ...",
"url": "https://www.gretanet.com/formation-cap-patissier+la-ciotat+1007.html",
"displayedUrl": "https://www.gretanet.com/formation-cap-patissier+la-ciotat+1007.html",
"description": "Formation CAP Pâtissier à La Ciotat - GRETA Marseille Méditerranée - Académie d'Aix-Marseille.",
"siteLinks": []
},
{
"title": "Les sujets du CAP pâtissier - EISF",
"url": "https://www.eisf.fr/sujets-examen-cap-patisserie/",
"displayedUrl": "https://www.eisf.fr/sujets-examen-cap-patisserie/",
"description": "8 déc. 2018 - Vous voulez vous entrainer à l'examen du CAP Pâtissier ? Retrouver les annales des années précédentes. Sujets CAP Pâtissier 2018.",
"siteLinks": []
}]
You can iterate the array using forEach and check if url have that text using indexOf. It if is greater that -1 then push it to the indexArr
let data = [{
"title": "CAP Pâtissier à La Ciotat - GRETA Marseille Méditerranée - Académie ...",
"url": "https://www.gretanet.com/formation-cap-patissier+la-ciotat+1007.html",
"displayedUrl": "https://www.gretanet.com/formation-cap-patissier+la-ciotat+1007.html",
"description": "Formation CAP Pâtissier à La Ciotat - GRETA Marseille Méditerranée - Académie d'Aix-Marseille.",
"siteLinks": []
},
{
"title": "Les sujets du CAP pâtissier - EISF",
"url": "https://www.eisf.fr/sujets-examen-cap-patisserie/",
"displayedUrl": "https://www.eisf.fr/sujets-examen-cap-patisserie/",
"description": "8 déc. 2018 - Vous voulez vous entrainer à l'examen du CAP Pâtissier ? Retrouver les annales des années précédentes. Sujets CAP Pâtissier 2018.",
"siteLinks": []
}
];
let indexArr = [];
data.forEach(function(item, index) {
if (item.url.indexOf('eisf') !== -1) {
indexArr.push(index);
}
});
console.log(indexArr)
I'm currently working with a rather large dataset so I'm looking to make the data variable smaller by nesting the data in a new variable 'nested_data'.
This is the data I'm using:
Landen,"Perioden","SITC","Onderwerpen_1","Waarde eenheid","Waarde"
Afghanistan,"2012","0 Voeding en levende dieren","Invoerwaarde","mln euro","1"
Afghanistan,"2012","1 Dranken en tabak","Invoerwaarde","mln euro","0"
Afghanistan,"2012","2 Grondstoffen niet eetbaar behalve...","Invoerwaarde","mln euro","."
Afghanistan,"2012","3 Minerale brandstoffen smeermiddele...","Invoerwaarde","mln euro","."
Afghanistan,"2012","4 Dierlijke en plantaardige oliën en ...","Invoerwaarde","mln euro","."
Afghanistan,"2012","5 Chemische producten","Invoerwaarde","mln euro","0"
Afghanistan,"2012","6 Fabricaten hoofdzakelijk gerangschi...","Invoerwaarde","mln euro","0"
Afghanistan,"2012","7 Machines en vervoermaterieel","Invoerwaarde","mln euro","1"
Afghanistan,"2012","8 Diverse gefabriceerde goederen","Invoerwaarde","mln euro","1"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","0"
I want this to be the result of the rollup:
[
{
"key": "0 Voeding en levende dieren",
"value": 1
},
{
"key": "1 Dranken en tabak",
"value": 0
},
{
"key": "2 Grondstoffen niet eetbaar behalve...",
"value": 7
},
{
"key": "3 Minerale brandstoffen smeermiddele...",
"value": 1
},
{
"key": "4 Dierlijke en plantaardige oliën en ...",
"value": 9
},
{
"key": "5 Chemische producten",
"value": 4
},
{
"key": "6 Fabricaten hoofdzakelijk gerangschi...",
"value": 12
},
{
"key": "7 Machines en vervoermaterieel",
"value": 3
},
{
"key": "8 Diverse gefabriceerde goederen",
"value": 0
},
{
"key": "9 Niet afzonderlijk genoemde goederen",
"value": 13
}
]
I've tried using d3 rollup like this:
.rollup(function(d){
return d.Waarde;
})
This has the following result:
My second attempt was using 'map', as follows:
.rollup(function(value){
return value.map(function(d){
return d.Waarde;
})
})
I liked that result much better but it's still not what I'm looking for:
While this method does add the correct value to the object, it puts it into an array (which 'map' obviously does). However I would like it to not place the value into an array but simply as the value of the key.
In your rollup method, that first argument...
.rollup(function(d){
return d.Waarde;
})
...is not an object: it's an array instead. Therefore, you almost got it right when you used map...
.rollup(function(value){
return value.map(function(d){
return d.Waarde;
})
})
...but the problem is that map will return an array, and that's not what you want. You want a sum:
.rollup(function(d) {
return d3.sum(d, function(e) {
return e.Waarde
});
})
Here is a demo with some changes in your data (you have "." as the value in some rows, which makes little sense here):
const csv = `Landen,"Perioden","SITC","Onderwerpen_1","Waarde eenheid","Waarde"
Afghanistan,"2012","0 Voeding en levende dieren","Invoerwaarde","mln euro","1"
Afghanistan,"2012","1 Dranken en tabak","Invoerwaarde","mln euro","0"
Afghanistan,"2012","2 Grondstoffen niet eetbaar behalve...","Invoerwaarde","mln euro","4"
Afghanistan,"2012","3 Minerale brandstoffen smeermiddele...","Invoerwaarde","mln euro","2"
Afghanistan,"2012","4 Dierlijke en plantaardige oliën en ...","Invoerwaarde","mln euro","7"
Afghanistan,"2012","5 Chemische producten","Invoerwaarde","mln euro","0"
Afghanistan,"2012","6 Fabricaten hoofdzakelijk gerangschi...","Invoerwaarde","mln euro","0"
Afghanistan,"2012","7 Machines en vervoermaterieel","Invoerwaarde","mln euro","1"
Afghanistan,"2012","8 Diverse gefabriceerde goederen","Invoerwaarde","mln euro","1"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","0"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","5"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","2"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","9"`;
const data = d3.csvParse(csv, d3.autoType);
const nest = d3.nest()
.key(function(d) {
return d.SITC
})
.rollup(function(d) {
return d3.sum(d, function(e) {
return e.Waarde
});
})
.entries(data)
console.log(nest)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
I'm trying to build a custom Facebook page feed into my website. When the posts on the Facebook page have only images it works great, but when they have videos we've got a problem. What I would like to happen is a mini version of the video to be place as it was an image itself. However I'm a newbie to the graph api, because of that I don't know how to grab the "source" element of the posts that have video on them.
Here is how the JSON objetc looks like:
{
"name": "Patrick Oliveira",
"picture": {
"data": {
"is_silhouette": false,
"url": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xft1/v/t1.0-1/c13.0.50.50/p50x50/11694800_709940652467661_5760283552162746065_n.jpg?oh=8ce289debf38df76b1a8ad72e9e32950&oe=5641D882&__gda__=1447414822_01484acd6dcdb29c62a7278a140bb592"
}
},
"posts": {
"data": [
{
"full_picture": "https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xft1/v/t1.0-9/p417x417/11873451_734632043331855_4522184841179328970_n.jpg?oh=67bd84af22a94bc59a2996ff8fa0a8d8&oe=563F7BE8&__gda__=1447502842_a29144ab596e29d3d92d2239d376adc9",
"message": "Lan\u00e7ado em fevereiro de 1990, o Photoshop completa 25 anos como o programa de edi\u00e7\u00e3o de imagens mais famoso do mundo. Parab\u00e9ns Adobe!",
"created_time": "2015-08-14T20:52:08+0000",
"id": "213578595437205_734632043331855"
},
{
"full_picture": "https://scontent.xx.fbcdn.net/hphotos-xft1/v/t1.0-9/q81/s720x720/11415380_700706213391105_871834721491614634_n.jpg?oh=8672f7ae4931323baaf012e5f57a6079&oe=567F5D35",
"message": "\"Agora eu sei de que \u00e9 feito aquele ch\u00e3o\".\n-- cliente",
"created_time": "2015-07-04T20:05:01+0000",
"id": "213578595437205_700706213391105"
},
{
"full_picture": "https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpt1/v/t1.0-9/s720x720/11406889_700700410058352_5592320885219405365_n.jpg?oh=acedee420f8e4944201c714e30f70627&oe=5679534C&__gda__=1451225194_477268223eedc2217b2ae1dcdd345399",
"message": "Levante que hoje \u00e9 Sexta!",
"created_time": "2015-07-03T09:27:01+0000",
"id": "213578595437205_700700410058352"
},
{
"full_picture": "https://fbexternal-a.akamaihd.net/safe_image.php?d=AQBxQzu6zRD6fM_d&w=720&h=720&url=http\u00253A\u00252F\u00252Fi.ytimg.com\u00252Fvi\u00252F2K9eMZyD5jc\u00252Fmaxresdefault.jpg&cfs=1",
"message": "Ferramenta poderosa pra quem trabalha com fotos de arquitetura, o Adaptive Wide Angle pode ser um poderoso aliado!\nhttps://www.youtube.com/watch?v=2K9eMZyD5jc",
"created_time": "2015-07-02T18:25:01+0000",
"source": "http://www.youtube.com/v/2K9eMZyD5jc?version=3&autohide=1&autoplay=1",
"id": "213578595437205_700700186725041"
},
{
"full_picture": "https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xft1/v/t1.0-9/s720x720/541646_700699430058450_5858057325981612930_n.jpg?oh=24a5d3e03cf1f782262e0b72d04831b4&oe=567999FA&__gda__=1451117341_93c352ddfa2804fa4047d84ab94978d9",
"message": "Come\u00e7ando o m\u00eas de Julho com o p\u00e9...",
"created_time": "2015-07-01T10:23:00+0000",
"id": "213578595437205_700699430058450"
}
],
"paging": {
"previous": "https://graph.facebook.com/v2.4/213578595437205/posts?limit=5&fields=full_picture,message,created_time,source&since=1439585528&access_token=1641569939420394|NyfBDunYwpFoZrtAoCSfqTV2-uU&__paging_token=enc_AdDQS8eEeKGQ3tvUJJxS1kyUXRwabHz2C1GZA0QZCufpZCHklYUI76WLCrigOB3IT1yxUtsCvx60ZA2haPnZA2Xoc2BOvPOLkM9eZBrbbrV1A87hVgIgZDZD&__previous=1",
"next": "https://graph.facebook.com/v2.4/213578595437205/posts?limit=5&fields=full_picture,message,created_time,source&access_token=1641569939420394|NyfBDunYwpFoZrtAoCSfqTV2-uU&until=1435746180&__paging_token=enc_AdAVBcOniyc1nbopw3Gr3CkmZB1pUDYBmZBghDmQXLunZBbvcuO1xttx6vpnkZBskAawu1sdcfh6qZCrU3sZA5MzZAkRQMT2VALYxOkCJOQZCm38ebDd2wZDZD"
}
},
"id": "213578595437205"
}
The fourth post is a video post, so I thought maybe I could generate a smaller video feed if I could grab that video source there.
Here is what I've been trying to do:
$.getJSON("https://graph.facebook.com/"+$page_id+"/?fields=name,picture,posts{full_picture,message,created_time}&access_token="+$access_token, function(fb) {
fb.posts.data[3].source;
});
However, the only thing I get from that is "undefined". If I do fb.posts.data[3].message or fb.posts.data[3].created_time or any of the other options it works, just for source that it returns "undefined". What am I doing wrong?
I found out what was wrong, so stupid. The request URL was missing the source element. So with this it works:
$.getJSON("https://graph.facebook.com/"+$page_id+"/?fields=name,picture,posts{full_picture,message,created_time,source}&access_token="+$access_token, function(fb) {
fb.posts.data[3].source;
});
I'm sorry for the mistake, it was my bad.