Create observable from array

this is part 53 of anglich rad tutorial in this video we'll discuss how to create an observer from static data in an array along the way we'll also discuss the two most common issues that you'll run into when working with observables in your angular application now if we take a look at the employee service that have been working with so far in this video series notice at the moment within the employee service we have our employee data hard-coded we have a private field here lists employees which is of type employee array and at the moment within this array we've got three employee objects and if you look at this get employees method all it's doing is returning that array so the return type of this method is employee array now what we want to do is instead of returning an employee array we want to return an observable of employee array at this point you might be wondering why do we have to return an observable of employee array instead of just an employee array well this is because in a real world application we would not have data hard-coded like this in the angular service we retrieve it from a database by calling a server-side service using the angular HTTP service the angler HTTP service returns an observable we discussed observables and calling suicide service using the angular HTTP service in part 27 of angular 2 tutorial in our upcoming videos in this series will discuss calling a server-side service so in preparation for that we want to create and return an observable from this get employees method so first let's change the return type of this method to absorb all of employee array we don't have this observable imported yet so let's import it from rxjs for / absorber now this visual studio code has automatically included the import statement right here now to be able to create an observable we need the rx GS of operator the syntax to import of operator is slightly different import within codes rxjs for slash ad for slash observable for slash off now there are several ways to create an observable one of the simplest ways is by using this off operator now if we take a look at get employees method notice we have a red squiggly that's because our method return type is observable of employee array but at the moment we are returning a plain array back that's the reason we have this red squiggly so let's create an observable for that let's use observable and on that we use the off operator that we have just imported and this may pass the array notice now the red squiggly is gone now if we take a look at list employees component where we are consuming this ket employees method notice we have an error that's because at the moment if you look at get employees it is returning and absorber so when we have an observable we need to subscribe to that observable and the way we do that is by using the SUBSCRIBE method so only get employees method here we call the SUBSCRIBE method and when the absorb loop completes we are going to get employee list back so let's call the parameter employee list and we want to assign that to the employees property that this dot employees equals employee list now let's save all our changes and then take a quick look at the browser now let's navigate to the create route back to the list route we see the full list of employees right here let's search for a specific employee click on to view his details back to the list the search term is retained the list is filtered so everything seems to be working fine as expected now if we take a look at our employee service at the moment employees data is hard-coded within the service so when we call this get employees method it returns the data immediately without any delay but in a real world application we retrieve this data from a database table by calling a server-side service so there may be some network latency and we may not get the data immediately so let's introduce some artificial latency by using the rxjs delay operator first let's import the delay operator let's make a copy of the import statement and instead of observable we use operator and the operator is delay and we want to delay this observable by 2 seconds so if we specify the time in milliseconds notice now we don't see any employees displayed when we launch browser developer tools within the browser console we don't see any errors either so let's understand what's going on here now the client code that consumes this get employees method is present within ng on a net life cycle hub notice here we are subscribing to the get employees method and here we have an anonymous function so this is the method that is called when the data is returned after 2 seconds by this get employees method so at that point when the data is available we are setting that data as the value for employees property but during those 2 seconds under which the data is returned this employee's property is undefined now the important question that we need to answer is what happens to these four lines of code during that wait time of two seconds well this code will be executed asynchronously it will not wait for the two seconds to complete and we know during those two seconds while we are waiting for the data to be returned by this get employees method you know this employees property is undefined and we are setting that as the value for filtered employees property right here so filtered employees property is also undefined and if we take a look at list employees component butan plate which is right here notice we are binding to that filtered employees probably and since it is undefined meaning it doesn't have any employees to display we see a blank page in chart we have this problem because this code right here you know this line of code is being executed before this line of code right here let's actually prove this first let's modify this anonymous function so we can include multiple lines of code we have this red squiggly because we are missing a semicolon now let's lock the time this line of code is executed so let's use console dot log and this is happening inside the SUBSCRIBE method so let's use this string subscribe and to this lets append the time it's executed I'm using date function for that and converting that to time string let's do the same within this else block so we want to know the time this line of code is executed and this is happening inside the else block so let's include the string else block notice first the code in the else block is executed at 12:07 37 seconds and then two seconds after that that is at 39 seconds the code that is present in the anonymous function that is passed as a parameter to the subscribe method is executed so the point that I'm trying to prove is this code right here is executed after this piece of code and that's the reason we don't see any of the employees on the page another common problem that you might run into is when you try to access any of the properties of this array you will get undefined errors let's actually prove that let's try to log the length of this array notice the error we have in the browser console cannot read property length of undefined so this not employees is undefined and we are trying to access length property of the undefined object and hence we have this error now to fix these errors we have to make sure this block of code executes after this line of code and this code is present in this callback function which is passed as a parameter to the SUBSCRIBE method so what we want to do is cut this block and then paste it inside this anonymous function that is passed as a parameter to the SUBSCRIBE method so now all these lines of code will be executed synchronously so these lines will be executed after the employees property is set but the data returned from the service so let's save our changes and then quickly tested notice now we don't have any errors within the browser console we see the list of all three employees and these three lines are executed almost at the same time synchronously at 2606 first the SUBSCRIBE time then the length of the array and then the else block time and we don't want to log all that to the console anymore so let's get it off these console dot log statements now let's quickly make sure our filtering still works exactly the same way as before first of all we see the full list of employees let's search for John when we remove the filter we see the full list of employees again now when we go to the create route and then come to the list route notice for two seconds we see the partial page and then when the data becomes available that's when we see the full list of employees we don't want to display a partial page to the user while we are waiting for data well discuss how to fix this using the resolve guard in our next video so the easiest way to and observable from an array is by using observable off and if you want to introduce some delay use the delay operator now if you have some code that you want to have executed synchronously after the observable is returned from the service then you want to move such code into the function that is passed as a parameter to the SUBSCRIBE method we have seen this in action just now that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 30,496

Keywords: rxjs observable delay example, angular observable delay, angular 2 observable subscribe delay, angular observable undefined, create observable with delay, create observable typescript, create observable from scratch, create observable angular, rxjs observable of array, angular 4 observable undefined, angular 5 observable undefined, angular 6 observable undefined

Id: OxPBwniYzjs

Length: 11min 40sec (700 seconds)

Published: Wed May 23 2018