Whether you're planning to deploy your application or not.
There's one more fix that I would like to do before we even start working with the images.
And what is that issue.
Well if I'm gonna check the product details I'm going to see that I'm looking for the URL so that is
gonna be the first place where in fact I'm accessing the image and the second place is obviously also
going to be the product.
So if we're gonna head over to the product then we have the product and what am I doing here.
Well I'm assigning to some kind of your URL.
And even though you might look at it and you'll be like well what is the big deal.
Well think about it.
Now once we need to make our fix then we need to start again hopping around our application and look
for specific places where we have those particular hours.
So wouldn't it make sense to create a flattened function more essentially.
I know that I'm getting my data within the product context.
I know that that data has some issues as far as images meaning I need to flattening out.
So wouldn't it be better if the same how we had such feature function the helper function.
We're also going to do the same thing with the product.
So before we set our product we're gonna pass it through the flattening function.
And this is exactly what we're gonna do.
So now we're gonna head over to our helpers and see where our helpers are.
And then we're going to need our URL and that is gonna be for the local folks.
In fact when you're setting up the cloud in their account you're not going to need it.
But don't worry we're going to leave comments.
I'm gonna probably repeat 77 times which one is for which use case.
So we're gonna get there first of all let's import our new URL knowledge.
Do you import your URL.
And then of course it is within the same folder so we can just look for the URL once we have the URL
then we're gonna have a flattened function.
So let's call this Latin function and as far as the function we're going to export it right away.
So let me first close the sidebar then we're gonna write the function and the name is gonna be flatten.
Products like so now this function is gonna get data so essentially data that we have within the product.
So again if I'm gonna head over back to my product context we know that of course we're fetching product.
So we're getting back the data we're getting back the response that data and this is where our products
are.
So that is what we're gonna passing within our flattened product.
And since it is a parameter I'm just going to name this data.
So what we're going gonna do with the data.
Well I know that my response is gonna be forward correct.
So this is the response that I'm getting back.
Again it is an array then each and every object is in fact the product.
And what I'm looking for I would like to extract this URL and set it separately right away in the image
property.
So that way again I don't need to Hopper on my application and do it manually each and every time I'd
want to access the image.
I know that once I pass my data through flattened product it is always gonna be the image and that way
if I need to change something about my URL I can do it in one place not try to remember each and every
time I try to access the image.
So let's do it let's return a new array.
So we're going to use data map and then we're gonna go for item course within our callback function
which we're going to access each and every item that we have in there.
And then like I said there's gonna be two options that we're gonna have.
So the first one is once we set up the cloud entry.
So let me throw this cloud the Neri like so and that option is gonna be very simple where each and every
item of course is going to have the image correct.
And now I need to show you my API and then the actual images within the url.
So I'm just going to create a new variable and I'm gonna sign it to image and then the euro.
Mark so that's gonna be the easy option where there's gonna be a new image property image property and
that is equal to item each and every item has it.
And then the actual image is sitting within the euro.
So that's gonna be the simple one.
Then the second one is gonna be for the local deployment.
So again that assumes that you're not going to deploy our application because if you do then essentially
you need to set up the cloud area anyway because again with Heroku it's not going to work.
And once I have my image I'm just going to return a new object.
So I'm iterating over a each and every item is an object.
So I'm going to copy all the properties again from the object and I'm just gonna overwrite that big
image object with just a simple image.
So I know I have the image property and I'm just overwriting that.
So let's first save it and again currently it's not gonna work.
We're not going to be able to see the images that way at least we don't need access all the time that
your URL.
We're just gonna be able to access our image then we're gonna head over to our product context like
so and then we have the featured ones.
Awesome.
But I also can have the product and again since it is within a function I can just use the same name
where I'm going gonna use a product is equal.
Now we need to import not feature products but in fact Latin product that is in fact our function.
Let's save it then we have our product and that of course is not equal to set product response data.
In fact it's gonna be equal to our flattened product.
So we're gonna say products then we're gonna write flattened products and then again we're gonna pass
in response data like so and then instead of setting our products to response data.
So on flattened data we're gonna pass in our product.
Now we're gonna say products like so and once we pass it where we should have the errors because again
within the you are aisles we're not going to be able to access it meaning within the product details
as well as the actual product.
Well there is no anymore the image that you URL is.
Remember when we flatten our product within the helpers it is just simply an image and that's all it
is.
There is no anymore the image you are.
So we're going to head over to a product details for now and then remember we were looking for the URL.
What we're not doing that anymore.
We don't need it.
We just need an image.
And of course we need to change this data around like so.
And the same works for the individual product.
Let me open up the sidebar and let's see let's see let's see where we have it.
We have the product somewhere like so.
And then again instead of looking for the image URL that property doesn't exist anymore so we can directly
get an image so I can just get her off the URL.
And again this is just to show you when we are using data already in multiple places.
It does make sense set up some kind of helper function that just flattens out the data first and let's
just change it around to an image.
And again initially it is not going to work.
Now why it's not working because the data that we're getting back is not right away are your url.
It's this one.
It is the you are all or we have forward slash.
And then we have the upload.
So now let me show you a setup for the local deployment.
So essentially if you're not planning to deploy the application if you're just happy with the way it
is.
Here's the simple fix.
We're going to head over to our helpers let's hurry over to our helpers.
And then remember what is the you are all.
While we have the euro of local host right.
So I'm just gonna come and the South has a cloud Nouri and then we're gonna say local setup no deployment
like so just so we for sure all are on the same page and the fix is following.
Again I'm gonna have the image.
However in this case I need to construct my property correct.
I need to have the local host.
Then forward slash and then whatever you are all is here.
So we're gonna set that up by first having a template string.
Then we're going to access the URL and then we're gonna look for that particular property which is within
the item then within the image currently.
And then of course the url.
So again item image.
And then the euro.
That's what we're looking for.
So let's access one more variable in this case we're gonna access each and every item then within the
item there is image property.
And since it has an object we are looking for the euro.
And once we set up our image with a proper value.
So the URL item image you URL then if we're gonna head over to a product you can see all the products
as well as if we navigate to a single product then our images are gonna be displayed.
However we're still gonna have issue with a feature product.
And now let's think about it why do we have an issue where I'm looking at the data correct but are we
adding a proper image now.
No we're not.
So we're gonna have to head over to our products.
And by the way there's two ways you could just copy and paste these lines of code here and just set
it up this way.
We're essentially not only we're filtering but before that we're going so kind of map over it.
That is also an option.
But in my case we're gonna head over to a context and then we have feature product as well as flatten.
So what if we would do it this way whereas since our flattened product is going to return.
All right.
Anyway while we can just instead of passing the response data I can just say here flattened product
and then passing the response and data.
So this way I'm gonna get a new array and then of course my feature product is going to work as well.
So essentially I'm gonna pipe my array through both of my helper functions The first one just gonna
flatten products.
And the second one is gonna be feature products.
So that's how we can set up the images.
If we're not planning on deploying our application.
So if it's just gonna be for our local environment and next we're going to take a look at how we can
set up the cloud in our account and in fact have our images directly pointing to a cloud.
Mary.