- 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
