Reading data with $.ajax - JavaScript Tutorial

- [Instructor] So here I'm going to show you how to read files with JQuery instead of JavaScript. In the very first Code Clinic exercise we essentially already built a dashboard, and I used the fetch API, which is sort of the modern way of retrieving data. However, JQuery has some methods that are a lot easier, and I'm going to show you how to use them in this section, and we'll start off by calling the JQuery version of an FE, which is something like this. So whenever the application is ready to go, we're going to execute the setInterval method. Now this is just regular JavaScript, and setInterval will allow you to execute a function at a specific timeframe. So we can specify here a thousand would be one second or a thousand milliseconds. And then in here we want to execute now an ajax call. So this would be equivalent to like the fetch API, but JavaScript makes it a lot easier. All you do is you call in this ajax method, and then you pass along a configuration object, and in this configuration object you usually specify things like the URL for the call that you want to make, so we'll go ahead and put in our web address here. And in addition to that, we're going to need the data type, and this is going to be some JSON data. And then we are also going to need to do something once this is successful. So this is going to be another function or a method depending on how you want to call it. And it's going to return some data. And this data is going to do things to our interface. What we want to do here is modify our dom. I'm going to start off by modifying these color status progress bars. And the way that I've built these is with JQuery, and the way that those work, as you see the headline right here, each one of those progress bars has a div with a class of progress. That's what builds this sort of gray thing right here. And then inside you have elements with a class of progress-bar, as well as a contextual color. So since these are red, green and blue, I'm using bg-danger for the red, bg-success for the green, and there is a bg-info, but it's a blue that's this color right here, this cyanish color. If you don't specify a bg or a background here, then it'll just use a blue background which looks a little bit nicer for what we're doing. Now I'm giving these an ID so that I can target them, and so that's how we're going to get to them. So let's go back into our JavaScript, or our JQuery as it may be. And so we're going to target first the element with an ID of progress red. And we can use the JQuery CSS method to modify the CSS for that element, so we can say here width. And then we can pass along a formula here. So data.red_value. So our data's going to come back with a red value, and... And actually I don't need this curly brace here, so actually CSS is going to need just a name and then comma and then the value that we want to modify that to. So the value divided by 255 times 100 and then the keyword percent. All right, let's go ahead and save that. And it looks like this should be a pound sign here. So let's go ahead and save that. And you can see that, as the seconds pass, the red value will be changing. So I want to also include a value for the amount, and we'll target then the same thing, but then use the JQuery text method here, and we'll pass along the data red_value directly. And we'll refresh. And you'll see that the way that progress bars work, whenever you put in text inside that progress red item, or that progress item, then it's just going to replace it in the color status as you see right here. So let's go ahead and finish the rest of them. I'll go ahead and make this window bigger, and you're essentially just going to grab these and do the same thing for the other colors. Right, then the last thing I want to do is actually modify the color of my swatch right here that I want to change the color depending on these values, and we'll go ahead and modify that next. So for that one, I'm going to target the element with the ID of current-color. And modify the CSS, what I want to change is the backgroundColor, and... that's going to be rgb. And this one right here should actually be red, green, and this one should actually be the blue_value, so let's go ahead and check that out. That looks better. So reading the data's actually pretty easy, and if you remember doing the first Code Clinic problem, you remember that the fetch API is a lot touchier about how you send data and how you receive it. JQuery makes it really easy to work with stuff and modify your application so that it receives data from a JSON stream a lot easier.