From the course: Code Clinic: JavaScript

Reading data with fetch() - JavaScript Tutorial

From the course: Code Clinic: JavaScript

Start my 1-month free trial

Reading data with fetch()

“

- [Narrator] Alright so, let's get started with our JavaScript. This is gonna be pretty simple. What we want to do here is just read the data from the PHP document that queries the database. So first off, I'm gonna start by creating an IFFE or an immediately-invoked function expression. That's just gonna make sure that all of my variables and anything I do here is protected. Now, although I'm using jQuery and Bootstrap in this course, I'm going to try to stay away from using jQuery specifically and try to use at least some JavaScript whenever I can. So, I'm not using the regular jQuery ready method, I'm just using a normal IFFE. So let's go ahead and get started by creating a function that I'm going to call loadChart. (typing) And I'm going to be calling this function a lot so that's why I'm creating it as a separate element. And this function is going to use the fetch method in JavaScript. Fetch is a pretty new JavaScript method so make sure you're running a current browser. It's pretty easy to use. All you do is create or use this fetch method and then you pass it along a URL of what you want to call. In this case, we want to call our PHP data which is on a server called pixelprowess.com and it's in a folder called "i" and the file is called "lake.php" and what I want to do here then is pass along some information. So, with this fetch command I want to at least specify the method and you can use different methods like post or get. I'm going to use the post method because we're going to want to pass things along with our data. So, we want to send something along to lake.php and then receive something else. Now, I'm gonna just get started by showing you how to just get the information. So, I'll just this method called post even though I could use get right now and then I need to execute what happens when the data returns. You just use the key word called then. This returns a promise when the data has been fetched from the URL. And so, I actually wanna do two then statements. The first one is going to receive the data from the database and then I wanna take that data and convert it into a json file. So, I'll say response.json. I'm gonna use this json method and it's gonna convert that data into a json file and then I'm also gonna execute another method here called then or another promise and in here (clicking) what I want to do is pass along the new response the one that's been converted to json and then use that data in a function and all I wanna do for right now is just log to the console the data that I get back. So, I'm gonna take that response and log it to the console. And whenever you do a promise you also want to use a catch method here to make sure that you output any errors. So, we'll say error and we'll say, (typing) send something to the console with the proper error. And then we'll call this function called loadChart to get the data. So let's go ahead and save this and if we preview this in the browser we should be able to go to the console tab and look at this object that we received from the database. So, if you remember from the previous video you know that we were getting essentially these different points plus some of the dates and that's exactly what we got. So, that's pretty cool. We're getting the data. Everything looks great. So now that we're reading the data from the database, we're ready to start passing along some values into our PHP file. We're gonna do that in the next video.

Contents