Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Retrieve and Display Data

Hello everyone. This is Reggie Dawson. Welcome to the Use Firebase as Your Backend course for Tuts+. In this video, we will learn to retrieve and display Firebase data. You should have at least two entries in your product listing now, so we need a way to retrieve the data. After we grab the data, we need to display it. Since we are using plain JavaScript, it will be a little more difficult to display the data. As you will see, this solution is not that elegant and requires a lot of code. A template engine would go a long way, but we will make do with jQuery and its time replacement methods. First, we will create a file called productlisting.html. We start our productlisting.html file off with our standard html boilerplate, a title of products, and our references to the Bootstrap in our custom CSS files. Then inside of the body tag, we're going to add our nav bar. Here, we have set up a link to home, which is index.html. We will create this page in a moment. Then we have a link set to this page called Admin. This has a class of active to let users know what page we are on. Then finally, we have our link to our add product page. Next we add a div with the class of container fluid. Inside this div, we add a class of main. Then we add an h1 tag that says Products For Sale. Then we add our script references. Again, we have jQuery, Bootstrap, and Firebase. After that, we add a script reference for productlisting.js in our js folder. Then we add the closing body tag. Next we need to create our productlisting.js file. As I said, the way we are going to display our data is going to take a lot of code. We will build up html strings and insert them into our page to display our items. This would be much easier to accomplish with the framework. The first thing we will add to this file is our reference to our Firebase data. This time we point our reference directly at the products child node. Next I will add a empty object to hold the data. In order to grab our data, we need to set up an event listener on our Firebase reference. This is using the on method to listen for our event, which in this case, is the value event. The value event triggers once with the initial data and then every time when the data changes. This will make sure that every time there is a change, it will reload our data. The other events we could have used are child_added, which triggers once for each individual child at the data location, and it will be triggered every time a new child is added. This limits network requests versus the value event, which sends all of the data when there is a change. The child_added event will just send the data for the child event that was added. Another event we can use is the child_removed event. This event triggers when a child node is removed and returns the data for the removed child. We also have child_changed, which is triggered when data stored on a child changes, and child_moved, which is triggered when the child's position is changed by priority. Needless to say that we can detect and respond to a number of events and situations depending on our needs. After the event, we have our function, which has an argument of snap. This is the data snapshot of all the data returned from Firebase. Then we are going to assign this data to the empty object we created by using the val method on our snapshot. This gives us our data as a JavaScript object. Once we have that, we can use a jQuery each to loop through the data. The function has arguments of the index, which is our ID, and the rest of our data, which is in the value argument. First we will create a variable to hold our html. On each pass of the loop, we will append the product listing to our page. First we have to build up the listing. First we add a Bootstrap root to the variable, and then we add a three column div with the class of productListHeader. Then we add a h2 tag with value .name as the text. This is how we access our data. In this instance, we are using the returned name data for this product. After that, we have a closing div. Then we add another three column div with the productList header class, followed by another h2 tag displaying the price. Then we start up a new row, followed by a three column div with the class of pic fix. We will get to this class, as well as the productList header class later in this video. After that, we add an if statement. Here we are checking if we have an image or not. When the value of our image is set to none, it will add an image with the alt tag saying no pic. We could have added a dummy image to let users know no image is available, but the alt tag is all right for now. If we do have an image, we will set it as the source to the image, and we will add it to our html page. Then we have another three column div with the p tag inside that will display our description. Next, we add another row, followed by another three column div. Inside of that div, we will add a button. This button has an on click event handler attached to it that executes the edit product function. This function takes the argument of the index, which is the id of the product. Make sure to properly escape the single code, so this will not work. Then we're going to add another button. This button is configured the same as the last button, except it is going to execute the delete prod function when clicked. This also has the class of button danger. As before, take care, and escape the single quotes properly. Then finally, we add a row with the class of spacer. After that, we can append the html to the page. The html string will get built up on each pass of the loop, and the products will get added to the page. Finally, we set up our error call back if we fail to grab the Firebase data. This will log the error code if we fail to grab data. As you can see, this was a lot of code to build up an html page. If we were using a framework, such as angular, this would have been a breeze to configure as you will soon see. At any rate, our listing is done. But let's also create our home page. What we have been building so far amounts to the admin area of our app. Since this represents an online catalog, we need a page to display to our users when they navigate to our page. Once we add authentication, we will be able to control who sees our admin pages. In the meantime, we need to set up a listing page that does not have our edit and delete buttons. All we need to do is copy the product listing html file, and rename it to index.html. After that, copy productlisting.js and rename it to app.js. First, go to index.html. All we need to change in this file is making the home link active and setting the admin link to point to the product listing page. We can remove the add products link as we can get there from the product listing page. The last thing we need to do in this file is change the script reference for productlisting.js to app.js. Next, we will go to app.js. All we have to do here is remove the two buttons from our listing for edit and delete. After that, our app.js file is ready. The last thing we need to do is add some moves to our custom.css file. First, we add our prodListHeader class. This has a border bottom style of solid with the width of one pixel and the color grey. The background will be black with the text color of white. This gives a little styling to the header of our listings. Then we have our pic fix class, which makes sure anytime we don't have an image, the listing is at least 140 pixels tall. And then finally, we have our spacer class, which adds to the space between listings. After that, save everything and preview your index.html page. You should see your products listed with their prices. If we click on Admin, we should see the Admin product listing with our edit and delete buttons. If we click on Add Products, we should be able to get to Add Products. We now know how to grab our data and display it. We have almost completed our admin interface. In the next video, we will learn how to update and delete our products.

Back to the top