title
2.3 HTTP Post Request with fetch() - Working with Data and APIs in JavaScript

description
💻https://github.com/CodingTrain/Intro-to-Data-APIs-JS We are now in Module #2! In the previous module, we focused on client-side JavaScript. We now will learn the basics of server-side programming with Node. 2.3 Let's take data from the client and send it to the server. This video covers routing, JSON parsing, and HTTP POST requests with fetch(). 🎥 NEXT LESSON: https://youtu.be/xVYa20DCUv0 🎥 PREVIOUS LESSON: https://youtu.be/3ls013DBcww 🎥 FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X 🚂 Website: http://thecodingtrain.com/ 💖 Patreon: https://patreon.com/codingtrain 🛒 Store: https://www.designbyhumans.com/shop/codingtrain/ 📚 Books: https://www.amazon.com/shop/thecodingtrain 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '2.3 HTTP Post Request with fetch() - Working with Data and APIs in JavaScript', 'heatmap': [{'end': 395.798, 'start': 363.645, 'weight': 0.766}, {'end': 804.486, 'start': 777.685, 'weight': 0.86}], 'summary': 'Tutorial covers server communication and data transfer, focusing on using fetch() to send a post request, sending data as json in node.js, and client-server communication, including handling server requests and responses, and integrating data with a database.', 'chapters': [{'end': 221.132, 'segs': [{'end': 54.282, 'src': 'embed', 'start': 19.792, 'weight': 0, 'content': [{'end': 23.734, 'text': 'Ultimately, the point of this is for the server to eventually save that to a database.', 'start': 19.792, 'duration': 3.942}, {'end': 24.875, 'text': "But I'm not there yet.", 'start': 24.115, 'duration': 0.76}, {'end': 30.657, 'text': 'I just want to say the client executes its own client-side JavaScript,', 'start': 25.055, 'duration': 5.602}, {'end': 36.139, 'text': 'gets the latitude and longitude and sends that data to the server and the server can just console log it.', 'start': 30.657, 'duration': 5.482}, {'end': 39.199, 'text': "I'm going to need to look at three things in order to do this.", 'start': 36.499, 'duration': 2.7}, {'end': 42.32, 'text': "I'm going to need to look at a concept known as routing.", 'start': 39.879, 'duration': 2.441}, {'end': 45.22, 'text': 'How do I set up a route in Express?', 'start': 42.64, 'duration': 2.58}, {'end': 54.282, 'text': 'This is the place, the endpoint for the API, the address at which I will send the data to and later also make a request to receive some data.', 'start': 45.52, 'duration': 8.762}], 'summary': 'Client-side javascript sends latitude and longitude to server; exploring routing in express.', 'duration': 34.49, 'max_score': 19.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY19792.jpg'}, {'end': 117.396, 'src': 'embed', 'start': 65.024, 'weight': 1, 'content': [{'end': 75.547, 'text': 'And then I also need to look at adapting the fetch function to specify a post request, a request that is posting data or sending data to the server.', 'start': 65.024, 'duration': 10.523}, {'end': 77.328, 'text': "Let's start with the route.", 'start': 76.187, 'duration': 1.141}, {'end': 81.132, 'text': 'So I want to set up a route on my server.', 'start': 77.669, 'duration': 3.463}, {'end': 87.098, 'text': 'So the way that I do that is by specifying this particular route will either be a get or a post.', 'start': 81.452, 'duration': 5.646}, {'end': 89.62, 'text': 'In this case, I expect a post request.', 'start': 87.438, 'duration': 2.182}, {'end': 93.003, 'text': 'So I am going to go and say app.post.', 'start': 90.101, 'duration': 2.902}, {'end': 97.246, 'text': 'Once I have a post,', 'start': 95.786, 'duration': 1.46}, {'end': 107.011, 'text': "I want to specify both the address where I want to receive that post as well as a callback function where I'm going to look at the information coming in and send a response back.", 'start': 97.246, 'duration': 9.765}, {'end': 108.872, 'text': "So let's set up that address.", 'start': 107.391, 'duration': 1.481}, {'end': 113.474, 'text': "Let's set up the endpoint for this particular route where I want to receive the post.", 'start': 108.932, 'duration': 4.542}, {'end': 117.396, 'text': 'And I could call it anything I want, like unicorn, cupcake, rainbow.', 'start': 113.774, 'duration': 3.622}], 'summary': 'Adapting fetch function to specify a post request. setting up a post route on the server.', 'duration': 52.372, 'max_score': 65.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY65024.jpg'}, {'end': 164.495, 'src': 'embed', 'start': 138.005, 'weight': 6, 'content': [{'end': 143.926, 'text': "And I'm using the JavaScript ES6 arrow syntax, which is a sort of nice, clean way of putting this in here.", 'start': 138.005, 'duration': 5.921}, {'end': 149.648, 'text': 'So the function is here, and it has two arguments, request and response.', 'start': 144.486, 'duration': 5.162}, {'end': 155.971, 'text': "The request variable holds everything that's contained within that request, all the data that's being sent,", 'start': 150.089, 'duration': 5.882}, {'end': 159.473, 'text': "any information I need to know about that particular client that's sending the information.", 'start': 155.971, 'duration': 3.502}, {'end': 164.495, 'text': 'The response is a variable that I can use to send things back to the client.', 'start': 159.853, 'duration': 4.642}], 'summary': 'Using javascript es6 arrow syntax to handle request and response data.', 'duration': 26.49, 'max_score': 138.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY138005.jpg'}], 'start': 1.121, 'title': 'Data transfer and server communication', 'summary': 'Focuses on transferring latitude and longitude data from the client to the server, with the server eventually saving it to a database, outlining the process of client-side javascript execution and data transmission. it also discusses setting up a route in express to handle post requests for an api, including specifying the route, setting up a callback function, and using the fetch function to send data to the server.', 'chapters': [{'end': 39.199, 'start': 1.121, 'title': 'Data transfer and server communication', 'summary': 'Focuses on transferring latitude and longitude data from the client to the server, with the server eventually saving it to a database, outlining the process of client-side javascript execution and data transmission.', 'duration': 38.078, 'highlights': ['The process involves transferring latitude and longitude data from the client to the server, with the server eventually saving it to a database.', 'The client executes its own client-side JavaScript to obtain the latitude and longitude and sends this data to the server.', 'The server then receives the latitude and longitude data and can log it for verification.']}, {'end': 221.132, 'start': 39.879, 'title': 'Setting up a route in express', 'summary': 'Discusses setting up a route in express to handle post requests for an api, including specifying the route, setting up a callback function, and using the fetch function to send data to the server.', 'duration': 181.253, 'highlights': ['Setting up a route to handle post requests for an API, specifying the route, and setting up a callback function.', 'Using the fetch function to send data to the server, specifically sending latitude and longitude as an object.', 'Specifying the address and callback function for the post request, using the app.post method in Express.', 'Describing the request and response variables in the callback function for handling the post request.']}], 'duration': 220.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY1121.jpg', 'highlights': ['The process involves transferring latitude and longitude data from the client to the server, with the server eventually saving it to a database.', 'Setting up a route to handle post requests for an API, specifying the route, and setting up a callback function.', 'The client executes its own client-side JavaScript to obtain the latitude and longitude and sends this data to the server.', 'Using the fetch function to send data to the server, specifically sending latitude and longitude as an object.', 'The server then receives the latitude and longitude data and can log it for verification.', 'Specifying the address and callback function for the post request, using the app.post method in Express.', 'Describing the request and response variables in the callback function for handling the post request.']}, {'end': 578.88, 'segs': [{'end': 272.859, 'src': 'embed', 'start': 242.439, 'weight': 0, 'content': [{'end': 244.86, 'text': 'But right now, what I want to do is send a post.', 'start': 242.439, 'duration': 2.421}, {'end': 250.921, 'text': 'In order to send a post, I need a second argument here, which is just a JavaScript object.', 'start': 245.4, 'duration': 5.521}, {'end': 252.002, 'text': "I'm going to call it options.", 'start': 251.001, 'duration': 1.001}, {'end': 256.983, 'text': 'And that way, I can set it up separately as a variable and kind of examine it more closely.', 'start': 252.562, 'duration': 4.421}, {'end': 261.624, 'text': "The first property that I need to put in options is the method that I'm using.", 'start': 257.202, 'duration': 4.422}, {'end': 263.605, 'text': 'And that method is a post.', 'start': 262.004, 'duration': 1.601}, {'end': 268.396, 'text': "Now, there's a lot of information that you could put here under Options.", 'start': 265.393, 'duration': 3.003}, {'end': 272.859, 'text': 'And if you want to look at all the possibilities, I refer you back to the MDN web docs.', 'start': 268.696, 'duration': 4.163}], 'summary': 'Sending a post using a second argument (options) with method as post.', 'duration': 30.42, 'max_score': 242.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY242439.jpg'}, {'end': 395.798, 'src': 'heatmap', 'start': 284.208, 'weight': 1, 'content': [{'end': 289.513, 'text': "So the body of the post request is where I'm packaging up all of my data.", 'start': 284.208, 'duration': 5.305}, {'end': 296.76, 'text': 'And you can see here, even though there are different ways to send the data, that what I want to do is send it as a string text.', 'start': 289.833, 'duration': 6.927}, {'end': 303.486, 'text': 'I want to stringify, take the JavaScript object data, and make it into a JSON string.', 'start': 297.08, 'duration': 6.406}, {'end': 306.389, 'text': 'So I want exactly this right here.', 'start': 303.766, 'duration': 2.623}, {'end': 312.951, 'text': "And there's one other piece that's important.", 'start': 310.609, 'duration': 2.342}, {'end': 317.755, 'text': 'I am specifically sending data in JSON format.', 'start': 313.812, 'duration': 3.943}, {'end': 321.798, 'text': "So it's useful to specify that in something called a header.", 'start': 318.135, 'duration': 3.663}, {'end': 329.044, 'text': "A header is something that can be packaged along with any post or get request that's moving between client and server.", 'start': 322.279, 'duration': 6.765}, {'end': 331.326, 'text': "And it's a way of adding some additional meta information.", 'start': 329.264, 'duration': 2.062}, {'end': 335.69, 'text': 'You can read more about this also on the Mozilla Docs.', 'start': 331.546, 'duration': 4.144}, {'end': 338.412, 'text': 'Headers have a name, a colon, and a value.', 'start': 336.01, 'duration': 2.402}, {'end': 346.52, 'text': 'And so the one that I want to use here, I can actually just go and grab it from here, which is this content type application JSON.', 'start': 338.472, 'duration': 8.048}, {'end': 351.045, 'text': "So I'm going to grab this, and I'm also going to put this here in my code now.", 'start': 346.801, 'duration': 4.244}, {'end': 352.962, 'text': "And I don't need this.", 'start': 352.062, 'duration': 0.9}, {'end': 363.405, 'text': "So even though there's more that I could put, the basic pieces that I need are, hey, I want this data to get sent as JSON.", 'start': 354.123, 'duration': 9.282}, {'end': 365.626, 'text': "I want to tell you that it's going to be JSON.", 'start': 363.645, 'duration': 1.981}, {'end': 367.506, 'text': 'And I want to post it to the API.', 'start': 365.846, 'duration': 1.66}, {'end': 371.987, 'text': "So now we're good, right? So I get the geolocation data.", 'start': 368.066, 'duration': 3.921}, {'end': 373.888, 'text': 'I put it into a JavaScript object.', 'start': 372.227, 'duration': 1.661}, {'end': 377.449, 'text': 'I package it as a post, and I send it to my endpoint.', 'start': 374.528, 'duration': 2.921}, {'end': 381.231, 'text': 'And in the server, I receive and console log it.', 'start': 377.79, 'duration': 3.441}, {'end': 382.211, 'text': "Let's see what happens.", 'start': 381.491, 'duration': 0.72}, {'end': 385.373, 'text': "So I'm going to say node index.js to run the server.", 'start': 382.552, 'duration': 2.821}, {'end': 387.234, 'text': "I'm going to go back to the browser.", 'start': 385.913, 'duration': 1.321}, {'end': 388.874, 'text': "I'm going to refresh my page.", 'start': 387.554, 'duration': 1.32}, {'end': 393.497, 'text': "I might probably put some console logging in the client to see if it's there.", 'start': 388.894, 'duration': 4.603}, {'end': 395.798, 'text': "But presumably, now it's sensing the server.", 'start': 393.677, 'duration': 2.121}], 'summary': 'Packaging geolocation data as json, sending via post request, and receiving in server for processing.', 'duration': 103.026, 'max_score': 284.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY284208.jpg'}, {'end': 471.718, 'src': 'embed', 'start': 439.582, 'weight': 8, 'content': [{'end': 443.207, 'text': 'And I could install it as a global node module.', 'start': 439.582, 'duration': 3.625}, {'end': 452.056, 'text': 'And if I choose to use it, I can say now node mon for node monitor index.js.', 'start': 446.713, 'duration': 5.343}, {'end': 456.638, 'text': "And any time I change the code, it's going to rewrite the server.", 'start': 452.396, 'duration': 4.242}, {'end': 460.24, 'text': "Sorry, any time I change the code, it's going to rerun the server.", 'start': 456.818, 'duration': 3.422}, {'end': 467.504, 'text': "So for example, I'm going to go here and say console.log, I got a request.", 'start': 460.48, 'duration': 7.024}, {'end': 471.718, 'text': "And over here, you'll notice it restarted the server.", 'start': 469.255, 'duration': 2.463}], 'summary': "Global node module 'node mon' reruns server on code change", 'duration': 32.136, 'max_score': 439.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY439582.jpg'}, {'end': 559.186, 'src': 'embed', 'start': 517.025, 'weight': 6, 'content': [{'end': 520.808, 'text': 'The way to do that is with the express function express.json.', 'start': 517.025, 'duration': 3.783}, {'end': 525.712, 'text': 'So, similarly to how I used express.static to host, say I want to host.', 'start': 520.849, 'duration': 4.863}, {'end': 528.134, 'text': 'I want this server to host static files.', 'start': 525.712, 'duration': 2.422}, {'end': 534.279, 'text': "I'm going to say express.json, because I want this server to be able to understand incoming data as JSON.", 'start': 528.134, 'duration': 6.145}, {'end': 544.772, 'text': "So in the code I want to do just like I did up here app.useExpress.static, I'm going to say app.useExpress.json,", 'start': 535.1, 'duration': 9.672}, {'end': 552.281, 'text': 'and then I can actually put some options in here to control or limit what is possible in terms of receiving data.', 'start': 544.772, 'duration': 7.509}, {'end': 556.064, 'text': 'All of that is documented here on the Express website.', 'start': 553.042, 'duration': 3.022}, {'end': 559.186, 'text': "Let's add just as an example this limit.", 'start': 556.585, 'duration': 2.601}], 'summary': 'Using express.json to host static files and handle incoming data as json, with options to control data limits.', 'duration': 42.161, 'max_score': 517.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY517025.jpg'}], 'start': 221.352, 'title': 'Using fetch to send a post request and sending data as json in node.js', 'summary': "Discusses using the fetch api to send a post request and emphasizes the need for a separate javascript object as the second argument, setting the method to 'post', packaging data in the body as a json string, and specifying the data format in a header. additionally, it covers the process of sending geolocation data as json to a server, encountering issues with undefined data, and resolving it by adding the ability to parse incoming data as json using the express.json function with a specified limit of one megabyte.", 'chapters': [{'end': 338.412, 'start': 221.352, 'title': 'Using fetch to send a post request', 'summary': "Discusses using the fetch api to send a post request, emphasizing the need for a separate javascript object as the second argument, setting the method to 'post', packaging data in the body as a json string, and specifying the data format in a header.", 'duration': 117.06, 'highlights': ["Using Fetch to Send a POST Request The chapter discusses using the Fetch API to send a POST request, emphasizing the need for a separate JavaScript object as the second argument, setting the method to 'post', packaging data in the body as a JSON string, and specifying the data format in a header.", 'Packaging Data in the Body as a JSON String The body of the post request is where the data is packaged as a JSON string, allowing for the transfer of JavaScript object data in this format.', "Setting the Method to 'post' Emphasizing the need to set the method to 'post' when sending a POST request using the Fetch API.", "Specifying Data Format in a Header It's important to specify the data format, such as JSON, in a header when sending data in that format between client and server."]}, {'end': 578.88, 'start': 338.472, 'title': 'Sending data as json in node.js', 'summary': 'Covers the process of sending geolocation data as json to a server, encountering issues with undefined data, and resolving it by adding the ability to parse incoming data as json using the express.json function with a specified limit of one megabyte.', 'duration': 240.408, 'highlights': ['The chapter covers the process of sending geolocation data as JSON to a server, encountering issues with undefined data, and resolving it by adding the ability to parse incoming data as JSON using the express.json function with a specified limit of one megabyte.', 'The author mentions using the content type application JSON and the need to send data as JSON and post it to the API.', 'The author encounters undefined data on the server and realizes the need to add the ability to parse incoming data as JSON using the express.json function.', 'The author demonstrates the use of nodemon as a utility to automatically rerun the server when the code is changed, enhancing the development workflow.', 'The author explains the use of the express.json function to enable the server to understand incoming data as JSON and mentions the possibility of specifying options, such as a limit for the maximum size of incoming data.']}], 'duration': 357.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY221352.jpg', 'highlights': ["Using Fetch to Send a POST Request The chapter discusses using the Fetch API to send a POST request, emphasizing the need for a separate JavaScript object as the second argument, setting the method to 'post', packaging data in the body as a JSON string, and specifying the data format in a header.", 'Packaging Data in the Body as a JSON String The body of the post request is where the data is packaged as a JSON string, allowing for the transfer of JavaScript object data in this format.', "Setting the Method to 'post' Emphasizing the need to set the method to 'post' when sending a POST request using the Fetch API.", "Specifying Data Format in a Header It's important to specify the data format, such as JSON, in a header when sending data in that format between client and server.", 'The chapter covers the process of sending geolocation data as JSON to a server, encountering issues with undefined data, and resolving it by adding the ability to parse incoming data as JSON using the express.json function with a specified limit of one megabyte.', 'The author mentions using the content type application JSON and the need to send data as JSON and post it to the API.', 'The author encounters undefined data on the server and realizes the need to add the ability to parse incoming data as JSON using the express.json function.', 'The author explains the use of the express.json function to enable the server to understand incoming data as JSON and mentions the possibility of specifying options, such as a limit for the maximum size of incoming data.', 'The author demonstrates the use of nodemon as a utility to automatically rerun the server when the code is changed, enhancing the development workflow.']}, {'end': 950.764, 'segs': [{'end': 605.004, 'src': 'embed', 'start': 579.92, 'weight': 0, 'content': [{'end': 589.209, 'text': 'All right, so now we can see NodeMon has restarted my server a bunch of times, and I should be able to go back to the web page and hit refresh.', 'start': 579.92, 'duration': 9.289}, {'end': 598.337, 'text': "And it's going to get the latitude and longitude, and now I should see in the server, I got a request, and I got the latitude and longitude.", 'start': 591.431, 'duration': 6.906}, {'end': 602.421, 'text': 'So the server has successfully received the data.', 'start': 598.617, 'duration': 3.804}, {'end': 605.004, 'text': 'This is what I wanted to do with this video.', 'start': 603.683, 'duration': 1.321}], 'summary': 'Nodemon restarted server multiple times, successfully received latitude and longitude data.', 'duration': 25.084, 'max_score': 579.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY579920.jpg'}, {'end': 655.76, 'src': 'embed', 'start': 627.037, 'weight': 6, 'content': [{'end': 629.379, 'text': 'But at a minimum, I can just say response.end.', 'start': 627.037, 'duration': 2.342}, {'end': 632.501, 'text': 'So this is required to do something.', 'start': 630.279, 'duration': 2.222}, {'end': 641.188, 'text': 'What I think that I would like to do, which makes more sense, is say response.json, which is a function that will send data.', 'start': 632.981, 'duration': 8.207}, {'end': 644.611, 'text': 'I could also say response.send for just a short message as a string.', 'start': 641.208, 'duration': 3.403}, {'end': 647.793, 'text': 'But I want to send maybe an object back with some data in it.', 'start': 644.811, 'duration': 2.982}, {'end': 649.655, 'text': "So I'm going to do response.json.", 'start': 648.053, 'duration': 1.602}, {'end': 654.299, 'text': 'And then I would say, I could say like status.', 'start': 649.995, 'duration': 4.304}, {'end': 655.76, 'text': "I'm just making this up.", 'start': 654.459, 'duration': 1.301}], 'summary': 'Using response.end, response.json, and response.send to send data in a web application.', 'duration': 28.723, 'max_score': 627.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY627037.jpg'}, {'end': 710.776, 'src': 'embed', 'start': 683.492, 'weight': 1, 'content': [{'end': 691.217, 'text': "So if I go back to index.html, what I have here calling the fetch function is where I'm sending the data and fetch returns a promise.", 'start': 683.492, 'duration': 7.725}, {'end': 693.178, 'text': 'So I can just say .', 'start': 691.517, 'duration': 1.661}, {'end': 695.299, 'text': 'then and then handle the response.', 'start': 693.178, 'duration': 2.121}, {'end': 699.081, 'text': 'Response console.log that response.', 'start': 695.759, 'duration': 3.322}, {'end': 704.544, 'text': "All right, so let's take a look at this in the browser now.", 'start': 702.223, 'duration': 2.321}, {'end': 706.653, 'text': "I'm going to hit refresh.", 'start': 705.592, 'duration': 1.061}, {'end': 709.095, 'text': "It's retrieving my latitude and longitude.", 'start': 707.313, 'duration': 1.782}, {'end': 710.776, 'text': "It's going to send it to the server.", 'start': 709.455, 'duration': 1.321}], 'summary': 'Using fetch function to send data and handle response, retrieving latitude and longitude.', 'duration': 27.284, 'max_score': 683.492, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY683492.jpg'}, {'end': 804.486, 'src': 'heatmap', 'start': 777.685, 'weight': 0.86, 'content': [{'end': 781.287, 'text': 'But it might be nice to make this an async function.', 'start': 777.685, 'duration': 3.602}, {'end': 786.771, 'text': 'This callback inside of getCurrentPosition can actually be an async function with the async keyword.', 'start': 781.668, 'duration': 5.103}, {'end': 788.072, 'text': 'And then I could use await.', 'start': 787.031, 'duration': 1.041}, {'end': 793.255, 'text': "So I'm going to say const response equals await fetch API options.", 'start': 788.552, 'duration': 4.703}, {'end': 804.486, 'text': "then const json, I'll just, maybe I'll call it data equals await response.json, and then console.log that data.", 'start': 794.801, 'duration': 9.685}], 'summary': 'Make getcurrentposition an async function for using await with fetch api.', 'duration': 26.801, 'max_score': 777.685, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY777685.jpg'}, {'end': 888.006, 'src': 'embed', 'start': 846.911, 'weight': 2, 'content': [{'end': 852.172, 'text': 'So when I go and load the server into my browser, I see index.html.', 'start': 846.911, 'duration': 5.261}, {'end': 858.534, 'text': 'JavaScript and index.html geolocates the latitude and longitude, sends that with a post to the server.', 'start': 852.773, 'duration': 5.761}, {'end': 864.116, 'text': 'The server receives it, console logs it out, and sends it back saying, I got it.', 'start': 858.754, 'duration': 5.362}, {'end': 866.237, 'text': 'That handshake is complete.', 'start': 864.696, 'duration': 1.541}, {'end': 868.057, 'text': 'The data is exchanged.', 'start': 866.477, 'duration': 1.58}, {'end': 871.278, 'text': 'Usually when I finish these videos, I like to give you a little exercise to do.', 'start': 868.297, 'duration': 2.981}, {'end': 871.939, 'text': "So here's one.", 'start': 871.319, 'duration': 0.62}, {'end': 873.039, 'text': 'The goal.', 'start': 872.539, 'duration': 0.5}, {'end': 877.741, 'text': "what I'm going to do in the next video is actually save the latitude and longitude, along with a timestamp,", 'start': 873.039, 'duration': 4.702}, {'end': 882.543, 'text': 'to a database so that I can keep this history of all of my latitude and longitudes over time.', 'start': 877.741, 'duration': 4.802}, {'end': 888.006, 'text': 'Two steps along the way to using a database is number one, just Make a variable, a variable like an array.', 'start': 882.803, 'duration': 5.203}], 'summary': 'Javascript geolocates and sends latitude and longitude to server, which logs and acknowledges the data. future goal is to save this data, including timestamp, to a database.', 'duration': 41.095, 'max_score': 846.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY846911.jpg'}, {'end': 950.764, 'src': 'embed', 'start': 919.368, 'weight': 4, 'content': [{'end': 923.41, 'text': 'you might want to add a button to your HTML page so that every time you click that button,', 'start': 919.368, 'duration': 4.042}, {'end': 926.952, 'text': "that's when you send the latitude and longitude to the server itself.", 'start': 923.41, 'duration': 3.542}, {'end': 929.633, 'text': 'So this is something that you can really start with.', 'start': 927.352, 'duration': 2.281}, {'end': 936.396, 'text': 'And I will actually implement this and have two examples that show it just storing it in array and then saving it to a local JSON file.', 'start': 929.693, 'duration': 6.703}, {'end': 939.578, 'text': "But what I'm going to come back to in the next video is a bit more direct.", 'start': 936.616, 'duration': 2.962}, {'end': 946.261, 'text': "I'm going to use a database node package called nedb to actually save to a database.", 'start': 939.838, 'duration': 6.423}, {'end': 949.823, 'text': "And I'll talk about what a database is and what some of the advantages are in the next video.", 'start': 946.281, 'duration': 3.542}, {'end': 950.764, 'text': 'So see you there.', 'start': 949.963, 'duration': 0.801}], 'summary': 'Add button to send latitude and longitude to server, store in array and local json file, then save to database using nedb.', 'duration': 31.396, 'max_score': 919.368, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY919368.jpg'}], 'start': 579.92, 'title': 'Nodemon server data retrieval and client-server communication', 'summary': 'Covers the process of retrieving latitude and longitude data, handling server requests and responses, including using response.json to send data back, and showcasing the handling of fetch promise in the client-side code. it also discusses client-server communication and the integration of latitude and longitude data with a database, showcasing the completion of a feature, proposing an exercise, and outlining the upcoming topic of using a database node package called nedb.', 'chapters': [{'end': 737.877, 'start': 579.92, 'title': 'Nodemon server data retrieval and response handling', 'summary': 'Covers the process of retrieving latitude and longitude data, handling server requests and responses, including using response.json to send data back, and showcasing the handling of fetch promise in the client-side code.', 'duration': 157.957, 'highlights': ['The server successfully receives latitude and longitude data, completing the intended task.', 'The importance of completing a request by sending a response back, with options such as response.json and response.send for sending data or a short message.', 'Demonstrating the handling of the fetch promise in the client-side code, showcasing the process of sending and receiving data between the client and server.']}, {'end': 950.764, 'start': 738.358, 'title': 'Client-server communication and database integration', 'summary': 'Discusses client-server communication and the integration of latitude and longitude data with a database, showcasing the completion of a feature, proposing an exercise, and outlining the upcoming topic of using a database node package called nedb.', 'duration': 212.406, 'highlights': ['The chapter demonstrates the completion of a feature involving a server hosting a static file, client-side geolocation, and data exchange through a post request, with the server acknowledging the receipt of data, resulting in a successful handshake.', 'The upcoming exercise involves saving latitude and longitude data, along with a timestamp, to a database, with the preliminary steps including the use of a variable like an array for persistence and potential exploration of the node file system package to store data in a text file.', 'A suggestion is provided to add a button to the HTML page for sending latitude and longitude data to the server, and the chapter hints at implementing two examples: storing data in an array and saving it to a local JSON file, while also foreshadowing the use of a database node package called nedb in the subsequent video.', 'The chapter introduces the plan to use a database node package called nedb to save data to a database, and it promises to delve into the concept of a database and its advantages in the next video.']}], 'duration': 370.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kw5tC5nQMRY/pics/Kw5tC5nQMRY579920.jpg', 'highlights': ['The server successfully receives latitude and longitude data, completing the intended task.', 'Demonstrating the handling of the fetch promise in the client-side code, showcasing the process of sending and receiving data between the client and server.', 'The chapter demonstrates the completion of a feature involving a server hosting a static file, client-side geolocation, and data exchange through a post request, with the server acknowledging the receipt of data, resulting in a successful handshake.', 'The upcoming exercise involves saving latitude and longitude data, along with a timestamp, to a database, with the preliminary steps including the use of a variable like an array for persistence and potential exploration of the node file system package to store data in a text file.', 'The chapter introduces the plan to use a database node package called nedb to save data to a database, and it promises to delve into the concept of a database and its advantages in the next video.', 'A suggestion is provided to add a button to the HTML page for sending latitude and longitude data to the server, and the chapter hints at implementing two examples: storing data in an array and saving it to a local JSON file, while also foreshadowing the use of a database node package called nedb in the subsequent video.', 'The importance of completing a request by sending a response back, with options such as response.json and response.send for sending data or a short message.']}], 'highlights': ['The process involves transferring latitude and longitude data from the client to the server, with the server eventually saving it to a database.', 'The server successfully receives latitude and longitude data, completing the intended task.', 'Setting up a route to handle post requests for an API, specifying the route, and setting up a callback function.', 'The client executes its own client-side JavaScript to obtain the latitude and longitude and sends this data to the server.', 'Using the fetch function to send data to the server, specifically sending latitude and longitude as an object.', 'The server then receives the latitude and longitude data and can log it for verification.', 'Specifying the address and callback function for the post request, using the app.post method in Express.', 'Describing the request and response variables in the callback function for handling the post request.', "Using Fetch to Send a POST Request The chapter discusses using the Fetch API to send a POST request, emphasizing the need for a separate JavaScript object as the second argument, setting the method to 'post', packaging data in the body as a JSON string, and specifying the data format in a header.", 'The chapter covers the process of sending geolocation data as JSON to a server, encountering issues with undefined data, and resolving it by adding the ability to parse incoming data as JSON using the express.json function with a specified limit of one megabyte.', 'The author mentions using the content type application JSON and the need to send data as JSON and post it to the API.', 'The author encounters undefined data on the server and realizes the need to add the ability to parse incoming data as JSON using the express.json function.', 'The author explains the use of the express.json function to enable the server to understand incoming data as JSON and mentions the possibility of specifying options, such as a limit for the maximum size of incoming data.', 'The author demonstrates the use of nodemon as a utility to automatically rerun the server when the code is changed, enhancing the development workflow.', 'Demonstrating the handling of the fetch promise in the client-side code, showcasing the process of sending and receiving data between the client and server.', 'The chapter demonstrates the completion of a feature involving a server hosting a static file, client-side geolocation, and data exchange through a post request, with the server acknowledging the receipt of data, resulting in a successful handshake.', 'The upcoming exercise involves saving latitude and longitude data, along with a timestamp, to a database, with the preliminary steps including the use of a variable like an array for persistence and potential exploration of the node file system package to store data in a text file.', 'The chapter introduces the plan to use a database node package called nedb to save data to a database, and it promises to delve into the concept of a database and its advantages in the next video.', 'A suggestion is provided to add a button to the HTML page for sending latitude and longitude data to the server, and the chapter hints at implementing two examples: storing data in an array and saving it to a local JSON file, while also foreshadowing the use of a database node package called nedb in the subsequent video.', 'The importance of completing a request by sending a response back, with options such as response.json and response.send for sending data or a short message.']}