Ionic 4: todo App + firebase

24 Retrieving Data from Cloud Firestore Building Mobile Apps

in this lesson we are going to learn how we can retrieve data from cloud file store and display that data in our application

we'll start by understanding how we can retrieve data from file store and then in the later part of this lesson we'll learn how we can display all that data inner ionic application

for this lesson I have added data about a few more products into the products collection so now you can see that in the products collection I have a total of six documents and each document

contains information about a different product so let's get back to visual studio code and learn how we can get this data in our ion ik application so here we are back inside visual studio

code and we have this code that we wrote in the last lesson which adds a new product with this product name and this product price every time the file store page loads up

so let's cut this code out otherwise we'll end up having the same product a number of times in our collection and move this code inside its own function let's call this function as create

document and in this function we'll paste all this code next we'll create another function to get all the data from file store so let's go ahead and create an

array first and let's call this array as products and this will be an array of type any and I'll initialize its default value as a blank array next I'll go ahead and create a new

function and we'll call this function as get documents inside this function will write the code to get all the documents from the products collection so we'll start by

using the firebase SDK firebase dot file store god collection the collection function takes in the name of the collection which is products in our case and on this we can execute the gate

function the gate function returns a query document snapshot object this query document snapshot object contains an array called docs which contains all the documents from

this collection so let's execute the promise on this function and here we can receive an object of type query document snapshot and let's call it query document snapshot as well with the

lowercase Q in here for now we log will document snapshot dot Docs which is an array to the console and in case an error occurs we'll handle that in the catch block for

now we log the error to the console as well finally we'll call the get documents function from our constructor so here inside the constructor we'll go ahead

and type in this dot get documents and let's save the file and now as the application refreshes in the browser we should get some console logs in the browsers console so here you can see

that I get an array logged to the console which contains a total of six objects each of these objects contains information about an individual document we cannot see all this information right

here except the ID which is the ID of the corresponding document inside the collection but there is a function that allows you to access all the JSON data inside this document so let's see how we

can access all this JSON data inside the document and display that data inside our page in the application so first of all we'll assign query document snapshot dot Docs array to our products array

since products array is a class level array we will be able to access it inside our file store dot page dot HTML file so we'll open fire a store dot page dot

HTML file and the first thing I'll do is improve the title here next we'll create an iron list inside the iron content inside this iron list will be creating one iron item for each product inside

the products array and will use an NG for for that so I'll use the iron item component and here on the iron item component I'll use an ng for in here we can go n type will

let product of products where products is the array that we want to loop over and for each product we just want to display product dot data which is a function that gives us all the JSON data

from the document and from this JSON data we want to extract product underscore name property let's save that and see what we get and there you can see that on the page I get this list

with all the products in my products collection as of now we are only displaying the product name let's go ahead and display all the other information that we have for each

document so the first thing I'll do is create an iron label inside my iron item and in this iron label within an h2 tag I'll use interpolation to display the product

name similarly I'll use an h3 tag to display the product price so I'll just change the name of the property to product price I'll also append a dollar symbol

along with this text to indicate that this is a price finally we'll use a P tag and use interpolation to display the documents ID the documents ID is not accessible inside all the JSON data you

can only access document ID using the documents reference which is product in our case dot ID and this will give you the document ID we are displaying this document ID here only for debugging

purposes there is no actual use for that so now that we have everything that we can display let's save it and see what we get in the application and there you can see that I have so

much information about each document or each product inside our application we have the product name the price and the document ID that can be used to perform certain operations on this document so

now that we know how we can get the data from cloud firestore and display it in our ionic application let's learn how we can apply conditions and perform queries while we retrieve data from file store