codeup-web-exercises/REST-API-lecture-handout.html at main · karla-jara/codeup-web-exercises · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RESTFul API Lecture</title>
</head>
<body>


<script>
  // ~~ ** REST requests / responses ** ~~
  // good reference material: https://medium.com/@9cv9official/what-are-get-post-put-patch-delete-a-walkthrough-with-javascripts-fetch-api-17be31755d28

  //~ * ~ Our first POST request example ~ * ~

  //TODO Together: Lets set up an example of what we would be sending up in a POST request - we need two main things: what we're sending (the actual data) and then a set of options in which we're telling Javascript what we're up to (what method? what type of data are we sending over? what does the body of my request need to be?).
  //
  // let blogPost = {title: "Fetch Requests", body: "Are a fun way to use JS!"} // the what

  // let options = {
  //     method: "Post",
  //     headers: {
  //         "Content-Type": "application/json",
  //     },
  //     body: JSON.stringify(blogPost)
  // }// the necessary identifying options
  //
  // let url = "/posts";
  //
  // console.log(blogPost);
  // console.log(options);

  //TODO Together: Now that we've seen an example of how our request looks in the console, let's try it on something that's a live API ready to interact with:

  // https://watery-hammerhead-bay.glitch.me/ :: our base URL for our API
  // /dreams = our route

  //TODO Together: As you can see, we've set up a little area for a user to send us a dream of some kind. A dream is an object that is comprised of one main 'dream' property and then an id (which is being dealt with automatically at this point behind the scenes): {"dream":"dreamValue", "id": numValue}


  //TODO Together: First, how can we fetch all of the dreams?

  const dreamApiURL = "https://watery-hammerhead-bay.glitch.me/dreams";
  // const route = "/dreams";

  //TODO Together: Now that we've gotten a list of what is over in our DREAMSApi, our next thing to attempt is to send some fresh data (a dream) up into it! I'll build a dream object to send over - I'll need to remember to program both a 'what' to send and then a 'how' (with the method, content-type, and body options) to have a complete looking POST request to send over.
//
// let dreamObj = {"dream": "My dream is to begin a career as a Software Developer"}
//
//   let options = {
//     method: "Post",
//       headers: {
//         "Content-Type": "application/json",
//       },
//       body: JSON.stringify(dreamObj)
//   }

  fetch(dreamApiURL, options).then(function (response){
      console.log(response);
  })
  //TODO: Set up your own dreamObj with your own variable name (e.g., let myDreamObj = {"dream": "I'm going to learn a new programming language this week!"). If you skipped creating your options when observing the lecture, go ahead and do so now with an options variable containing our usual suspects (a method, the content-type in the 'headers' area, and then a body property that will hold the 'guts' of our request as a value.)

  //TODO: Now, put together a fetch request that will send up your dream into our growing dream database! If you missed it our dreamApiURL is "https://watery-hammerhead-bay.glitch.me/dreams". Note: Please do not send up inappropriate dreams - leave those for your own dreaming after hours! :)

  // ~ * ~ PUT/PATCH requests ~ * ~

  //TODO Together: Let's target a specific ID by url (e.g. "/dreams/2" for the dream with an ID of '2') and update that resource found at that url with an entirely new resource (an {entire: object}) - PUT will let us replace the entire {dream: object} that was found at that url!
  //
  // let putURL ="https://watery-hammerhead-bay.glitch.me/dreams/36"
  // let newDreamObj = {"dream":"My dream is to master coding"}
  // let options = {
  //     method: "PUT",
  //     headers: {
  //         'Content-Type': 'application/json',
  //     },
  //     body: JSON.stringify(newDreamObj)
  // }
  //
  // fetch(putURL, options).then(function (response){
  //     console.log(response);
  // })

  //TODO Together: Target a specific url and update a specific property within. Instead of sending an entire object over, we send over the piece we want to PATCH! ({targetProperty: patchContents})

  let patchURL ="https://watery-hammerhead-bay.glitch.me/dreams/15"
  let dreamString = {"dream":"My dream is to master coding"}
  let options = {
      method: "PATCH",
      headers: {
          'Content-Type': 'application/json',
      },
      body: JSON.stringify({dream: dreamString})
  }

  fetch(patchURL, options).then(function (response){
      console.log(response);
  })


  //TODO Interactive: Let me edit one of your dreams - after I fetch a list of the current dreams, I'll ask one of you to give me an ID to work with that was your POSTed dream object. Then we'll set up a patch together to patch up that object into a slightly different form!

  let newDreamString = "My dream is to go skiing in the Alps!"


  // ~ * ~ DELETE requests ~ * ~

  //TODO Together: Last, let's look at how we can delete something. We need an /id as usual for this use. Note: This is a permanent deletion without any confirmation message, so make sure you DELETE carefully in the future!


</script>
</body>
</html>