Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #5 Outputting Data

  • 00:00:00 so if the data in place it's time to
  • 00:00:02 output it so I will go into my routes
  • 00:00:05 folder in the index.js file where I
  • 00:00:07 render my index view and now it's time
  • 00:00:10 to not only return the title but instead
  • 00:00:13 to return an array of products through
  • 00:00:17 which I can loop in the view with
  • 00:00:19 handlebars handlebars provides a looping
  • 00:00:22 mechanism and then well output the right
  • 00:00:25 data in the view so first step is to
  • 00:00:29 fetch all the the items so products and
  • 00:00:33 in order to do this or in order to use
  • 00:00:36 this I will need my product model from
  • 00:00:41 me from the models folder yeah Thank You
  • 00:00:50 webstorm had a little got a little stuck
  • 00:00:53 here so importing that and then products
  • 00:00:57 can be fetched by simply executing
  • 00:00:59 product find with no arguments and this
  • 00:01:02 does exactly the same I did in the shell
  • 00:01:05 client in the last video when using DB
  • 00:01:08 dot products find this will give us the
  • 00:01:11 exact same data next I can pass this
  • 00:01:15 data to the view with a separate new
  • 00:01:19 products where it will notice named URIs
  • 00:01:21 option and it's up to not optional but
  • 00:01:23 up to you you may choose whichever name
  • 00:01:25 you like and then in the index dot HBS
  • 00:01:28 file I can loop through this so looping
  • 00:01:33 however needs to be planned because I
  • 00:01:35 will have multiple columns and grids now
  • 00:01:38 right and this was easy when hard coding
  • 00:01:41 this but we're looping through an array
  • 00:01:43 where I don't know how many items it has
  • 00:01:45 of course I dunno here but you get my
  • 00:01:48 point in a real application you won't
  • 00:01:50 know I need to be able to create rows um
  • 00:01:55 once I reach the maximum number of items
  • 00:01:58 I want to have in a single row
  • 00:02:00 thankfully bootstrap will take care
  • 00:02:02 about collapsing it if we go to smaller
  • 00:02:06 screen sizes but nonetheless I know that
  • 00:02:09 the default setup will have
  • 00:02:12 three thumbnails in in a row so I need
  • 00:02:15 to break after looping through three
  • 00:02:17 items the first thing however is to
  • 00:02:21 create loop and I use double handlebars
  • 00:02:24 or double curly braces – to do this and
  • 00:02:28 then followed by a hashtag to indicate a
  • 00:02:31 blog statement and here I will use each
  • 00:02:36 product now this will loop through all
  • 00:02:40 the products and I need to close that
  • 00:02:43 lock statement by just typing double
  • 00:02:47 curly braces and then slash each so like
  • 00:02:49 you close an HTML tag basically now this
  • 00:02:53 will loop through all the products and I
  • 00:02:55 can show you that this works by simply
  • 00:02:58 outputting product here and then I will
  • 00:03:01 restart my server and yes by the way you
  • 00:03:05 could of course install node monitor or
  • 00:03:08 some other packages making sure that
  • 00:03:10 this gets Auto restarted whenever you
  • 00:03:12 change anything but I kind of like doing
  • 00:03:15 this on my own and keeps me keeps me
  • 00:03:17 focused whatever but you may do this of
  • 00:03:19 course so with that if I reload use the
  • 00:03:22 product product product proper product
  • 00:03:24 however that are a bit too much products
  • 00:03:28 here we don't have that many products in
  • 00:03:32 our database here right the reason is
  • 00:03:35 that if we have a look at the code here
  • 00:03:37 in the UNIX J's file this is the same
  • 00:03:41 problem we had in the seeder the finding
  • 00:03:44 of product is asynchronous
  • 00:03:47 therefore we are calling the render
  • 00:03:49 method here when we actually haven't
  • 00:03:51 gotten all the results back so as you
  • 00:03:55 can see it's looping through something
  • 00:03:56 because products is some kind of
  • 00:03:59 Mongoose object at this point but it's
  • 00:04:02 not the actual result it's not the
  • 00:04:04 actual products array we get this array
  • 00:04:09 in another way I can get rid of this
  • 00:04:11 variable here and instead I will create
  • 00:04:14 a new call back here where I either get
  • 00:04:18 an error or all the documents and now
  • 00:04:21 inside of this callback I will call
  • 00:04:25 this render method here and pass the
  • 00:04:29 documents here now if I restart the
  • 00:04:34 server and reload this looks much better
  • 00:04:38 now we got five products which is
  • 00:04:40 exactly the amount we have in the
  • 00:04:41 database since you see that five
  • 00:04:43 products great so this is good but of
  • 00:04:47 course we don't want your output product
  • 00:04:49 here we want to well output the actual
  • 00:04:53 products so I need to split after having
  • 00:04:57 free products so I will kind of need to
  • 00:05:01 loop through chunks of products each
  • 00:05:05 chunk has reaiiy tums and we'll make up
  • 00:05:07 a row and then within each chunk I need
  • 00:05:10 to loop through the individual items to
  • 00:05:12 then create the columns right the entry
  • 00:05:18 point you create those chunks which we
  • 00:05:20 need to live through as an ear next
  • 00:05:22 chest file here I will create product
  • 00:05:26 chunks this will be an empty area at the
  • 00:05:28 beginning and I want to have a chunk
  • 00:05:31 size of three of course variable two
  • 00:05:37 next I will create a for loop where I
  • 00:05:41 will loop until I reach my document
  • 00:05:47 length so the nth element the last
  • 00:05:50 element and my product area of the
  • 00:05:52 products I get back but I will increase
  • 00:05:55 I not buy one but instead by the chunk
  • 00:05:58 size you jump in these jump size chunk
  • 00:06:04 size steps here then I will use the
  • 00:06:07 product chunks array pushing new item
  • 00:06:11 and this new item will be another array
  • 00:06:13 you can go away thank you so this will
  • 00:06:15 be another array so I will and take my
  • 00:06:21 my document but all my products here and
  • 00:06:23 slice a part out of that and I will
  • 00:06:26 slice from the current I so from the
  • 00:06:30 current in X here or record loop in X 2i
  • 00:06:36 plus chunk size
  • 00:06:38 so if we're at the first iteration where
  • 00:06:41 is zero then I will take a part of that
  • 00:06:46 dot products array
  • 00:06:47 starting at the first element all the
  • 00:06:50 way up to the fourth or at the third
  • 00:06:54 element so excluding the fourth element
  • 00:06:56 so I 0 plus 3 which is the chunk size
  • 00:07:00 here is 3 so this will be the first
  • 00:07:03 chunk I take out now I go into the next
  • 00:07:06 iteration I is incremented by free since
  • 00:07:09 this is my chunk size here so now I is
  • 00:07:12 free it was 0 now it is incremented by
  • 00:07:14 free it is free therefore the next slice
  • 00:07:18 I take is beginning at the third element
  • 00:07:21 for the actually the fourth element
  • 00:07:24 since the UNIX VD area next edge starts
  • 00:07:27 at 0 and I go up to well this will be 6
  • 00:07:32 my array only has 5 items so it will
  • 00:07:34 take the last two elements and I will
  • 00:07:36 therefore have create a new array the
  • 00:07:38 product chunks array which has two
  • 00:07:41 elements two arrays the first area
  • 00:07:43 having free products or free elements
  • 00:07:45 and secondary having two I then pass
  • 00:07:49 this product chunks array here and in my
  • 00:07:53 view I will solute through this I can
  • 00:07:56 leave this name products if I like and I
  • 00:08:00 will copy one or I will copy the row
  • 00:08:05 here put this into this loop get rid of
  • 00:08:11 all columns but one and inside this loop
  • 00:08:15 because I want to create this row for
  • 00:08:17 each chunk therefore this is in the
  • 00:08:19 outer each loop now I will trade another
  • 00:08:21 each loop and inner each loop here
  • 00:08:25 inside this I will loop through or it
  • 00:08:28 will create my columns since this will
  • 00:08:33 be the individual products in each row
  • 00:08:35 and here I simply loop through this this
  • 00:08:38 is a keyword and handlebars if you have
  • 00:08:40 a loop each products then you can
  • 00:08:43 reference the current element off a loop
  • 00:08:46 with this and this will be of course
  • 00:08:48 another array since we have this chunk
  • 00:08:51 array with its elements which are
  • 00:08:53 I raised two and therefore I then loop
  • 00:08:55 through each element now this I can
  • 00:08:58 output the data and I will start here
  • 00:09:01 with the source of the image I can use
  • 00:09:04 handle bar syntax here or a handle bars
  • 00:09:06 expression to again use this now this
  • 00:09:09 here is of course in this loop and
  • 00:09:11 therefore is not referring to an array
  • 00:09:13 here anymore but instead to the
  • 00:09:15 individual object now I know that this
  • 00:09:17 object will have an image path since
  • 00:09:21 well this is what I set up in the schema
  • 00:09:23 and if I now reload this page you can
  • 00:09:27 see it still works but I got all the
  • 00:09:29 images lovely looks good and of course I
  • 00:09:35 also get the old items here since I
  • 00:09:37 didn't delete that so let me get rid of
  • 00:09:40 that code reload here again looks good
  • 00:09:44 so let's do the same for all the other
  • 00:09:47 pieces so for the title for example
  • 00:09:52 and for the price now I'm not replacing
  • 00:09:56 the dollar sign I believe that just want
  • 00:09:59 to output the price here if I get reload
  • 00:10:02 this looks good
  • 00:10:03 however you do see that we don't have
  • 00:10:06 equal sizes for all thumbnails but for
  • 00:10:09 me that is okay um of course you could
  • 00:10:12 fix this and this button you should say
  • 00:10:14 by by the way didn't change this as it
  • 00:10:18 seems
  • 00:10:18 or it should say add to shopping card so
  • 00:10:26 like this looks great so regarding the
  • 00:10:29 thumbnail sizes it's no problem for me
  • 00:10:31 here if you want to change this you
  • 00:10:34 would have to set a minimum hay height
  • 00:10:36 on all these fun nails but for me that's
  • 00:10:40 okay like that so that were outputting
  • 00:10:43 the actual information we see that enter
  • 00:10:45 the database and this is already an
  • 00:10:49 important first step I'm happy to see
  • 00:10:52 you back in the next videos when we take
  • 00:10:55 the well next steps
  • 00:10:56 see you there bye