In this lecture, we're going to render the list of clips to the user.
First, we need to store the array of documents from our observable as we learned the documents are
stored in a property called docs.
The other properties are not necessary to the subscriber.
We should modify our pipeline to return the Docs property, open the Clips service file in your editor.
At the top of the file, we will import the map operator from the SJS operators package.
Next, scroll to the Get User Clips function at the end of the pipeline at the map operator.
Inside this operator, we will pass in a function with a parameter called snapshot.
The value resolved by our promise will be a snapshot object inside this callback function.
We will return the snapshot doc's property.
TypeScript will throw an error.
It's saying the doc's property may not exist on the snapshot object.
We will assert the type to get rid of the error.
Wrap the snapshot object with parentheses.
The type will be asserted to a class called query snapshot.
This class needs to be imported back at the top of the file import, the query snapshot class from the
angular slash fire slash compat slash firestorm package.
Back in our observable, the air goes away, but another appears the query snapshot class requires a
generic fire wants to know the structure of the document from the collection.
Let's pass in the I clip model as the generic.
Let's test of the observable is pushing the documents, refresh the managed page in the browser with
the developer tools opens.
In the console, the value received from the observable will be an array which we were looking for.
The component doesn't have to worry about the other properties in the snapshots.
It can focus solely on the documents.
Let's switch over to the upload component class in our ED.
We're going to store the documents locally by creating a property.
First, we should import the unclip model for type checking.
Next, inside the class to find a property called Clip's with an initial value of an empty array.
We're going to constrain the types of values that can be inserted into this array by annotating the
property with the equip model.
Be sure to add square brackets after the model name, this syntax indicates the value of the property
will be an array of this type.
We can move on to pushing the documents into the array.
Scroll to the subscription we made in the nji on init function.
Instead of logging the value, we will pass in a function with the ducks object as an argument.
Inside this function, we're going to reset the eclipse array.
The observable will always push a fresh list of documents.
We should reset the eclipse to prevent duplicates from appearing on the page.
Otherwise, we may experience strange behavior.
Next, we're going to loop through the dots array with the for each function.
Individual documents will be referenced as documents.
Individual documents contain properties and methods related to interacting with the document.
We're not interested in interacting with the entire document.
Our sole interest is the data inside this function.
Let's call the this dot clips dot push function to add the data to the array.
We're going to push an object.
Inside this object, we're going to push the docked data function with the spread operator.
The spread operator will merge their properties with the object.
There is one problem with this.
The data function will not return.
The idea of the documents will need the aid.
If we want the user to update the document, create another property called Document ID, set it to
document date ID.
It's important we store the ID because will allow the user to edit the clip in a future lecture, the
ID will assist us with updating the correct document.
When the user submits their changes, TypeScript will throw an error at us.
The object is not compatible with the I clip model because of the Document ID property.
Let's add this property to our model as an optional property.
Open the I clip model file.
Inside the object ad, the document ID property as an optional property, the type for this property
will be string.
We've created a stripped down version of the document.
It's the ID with the contents of the data.
Any other additional properties won't be pushed to the array.
Let's give things a test in the browser.
Refresh the page.
Nothing will change because we aren't presenting the data yet.
We'll get to that in a moment.
First, let's use the developer tools to check the component data under the Components tab.
Search for the manage component.
Listed under the properties category will find the eclipse array filled with the documents from Firebase.
We've successfully retrieved and stored the document data before we move on to the next step.
Let's test it filtering works.
We can test the filtering by modifying one of the clips in the database.
You don't have to do this, but I want to show you that we're receiving filtered results.
Switch to the Firebase console in the database.
Our view one of the cliff documents, I'm going to slightly modify the UID property.
After making that change, I'll refresh the page.
The requests will still work this time if I were to view the list of documents, the document that was
modified wouldn't appear in the list.
This is because the User ID doesn't match the IDs stored in the application.
This test proves that the filtering worked.
I'm going to undo the change I made to the database.
In the following lecture, we're going to begin rendering the list of clips.