Now that we are able to insert data,
let's also get data and for that, I will grab this entire mongo client code here,
copy it and we'll soon find a better solution and move over to my get/ method which is the method
that is triggered by requests that want to fetch all product data.
Now here we will use mongodb, I'll comment out this code for now
and here, I'll then paste in my code for well interacting with mongodb.
Now I still want to connect and use that client to reach out to the products collection but I don't want
to insert anything,
instead I'll now use find because I want to get all products here,
so find gives me all products, right.
Well almost, what does find give us in detail? If you remember to read module, find gives us a cursor,
so we should use that cursor here to traverse through our data and just as before,
you'll learn more about the cursor in the official driver docs by searching for the cursor object here
and you'll see all the methods you can execute on the cursor and how they work and how you can interact
with the cursor.
So we get back such a cursor and I simply want to go through all the documents I get back and then do
something with them,
so I will chain a method
here, I'll chain the forEach method.
ForEach simply goes through all the documents inside of my cursor,
so it basically fetches all the data and in forEach, I should get access to my product document
one at a time
and then here in this anonymous method which I pass to forEach,
I can do something with that.
So here I will simply log the product document for now
and then can then be chained but it's chained
after forEach
because this still is an asynchronous task, it will take all the documents one at a time and fetch
that from my database server.
So this is now looping through all the documents
and here I know that I'm done with that operation and all the documents that I wanted to process have
been processed.
Let me also return the product doc here to see if that does something.
So then here I have my result,
now I don't want to say product added here in the response,
indeed I have a response here which I want to use. I'll use a response with my result products which
is my old dummy data
here, for now I'll just return an empty array until I have some real data.
We can also set the status code to 200 here and down there in catch,
I still say an error occured, also makes sense to do this on the general connections
catch block here I guess,
also for inserting.
So with all that added and with the cursor being used,
let's see what we got here. So let's go back to our backend server,
quit the process and restart it because we changed something on the code
and then in the react app, simply reload that starting page. Now you won't find products here because I
am returning an empty array
but what I do see is that I do console log some data here and that console log is stemming from this
line.
However in the then block, I then console log
null as you can see. So I get my data here
but I'm not really able to use it here,
so what can we do now?
Well what we can do is we don't need that line but we can now create a new constant here which we can
name products which is an empty array
initially, I create this right after the connection was established. In forEach,
I can then use products and push product into that array.
Now I also need to transform the price though because that will be a decimal 128 bit object which can't
be handled by Javascript,
so I'll set products price equal to products price toString, toString is a method provided by the mongodb
driver for the decimal 128 bit object
and I basically take the old value, convert it to a string and override the value with that result of
that operation
and then I push that changed product onto my products array
and since I define that array outside of this chain of methods, I can use it everywhere inside of this
anonymous function and therefore in this then block where I return a response,
I can also return my products array,
so this array. You can get rid of this console log here
and now if I save that, I have to restart my backend server again
and now if I reload that front page here, I get an error,
let's quickly check what's wrong. Yeah, products price is wrong,
of course here I should use product data, product doc, product doc and also push the product doc because I'm
of course interacting with the product document here,
so this was simply a typo.
Now let's restart our backend server and let's try this again here,
let's reload the page
and here is the product we added, now fetched from our database.
Please note that the image of course never was stored in the database and it never should be,
images should be stored on a file storage,
here I simply have some dummy images I'm using,
you can use any url when saving a new product. If you also have a web application with upload and
so on,
you would store the uploaded images in a file storage and then only store the path to the image in the
database, not the image itself because this simply bloats your database, is pretty inefficient,
a lot of data to transfer and just not what a database is built for.
But with that, we got all the code we need to insert products and to get them but we're also repeating
ourselves regarding how we connect to the database,
so that is something I want to change next.
How we connect to the database and then interact with it.