Bryan A's Personal API #29
Conversation
| @@ -2,6 +2,95 @@ console.log("Sanity Check: JS is working!"); | |||
|
|
|||
| $(document).ready(function(){ | |||
|
|
|||
| // your code | |||
| // Profile GET Statement | |||
There was a problem hiding this comment.
I assume you didnt get a chance to use the profile data?
| $.post("/api/heroes", userHero, function(data){ | ||
| renderHero(data); | ||
| }); | ||
| $(this).trigger("reset"); |
There was a problem hiding this comment.
Nice, I didnt know about the trigger("reset") to clear the input fields
public/scripts/app.js
Outdated
| }); | ||
| // Delete Function | ||
| function removeHero(data){ | ||
| let deletedHero = $(this).parents(".data-hero-id").data("hero._id") |
There was a problem hiding this comment.
I think it should be let deletedHero = $(this).parents(".data-hero-id").data("hero.-id"). But this is only client side, if you want to delete it in the server, you should first send a delete request to the server passing the id (in this case deletedHero) at url. When the server.js or one of your controllers catches it, you query your database, find that matching id and delete it. The mongoose function that lets you do that is findByIdAndRemove(req.params.id, ... ). Assuming your db is call Hero, you will you will do db.Hero.findByIdAndRemove(req.params.id, .... ). And when you are done, you send back a 200 http code and then delete it on client side.
public/scripts/app.js
Outdated
| let heroesHTML = (` | ||
| <div class="data-hero-id="${hero._id}"> | ||
| <div class="col-md-10 col-md-offset-1"> | ||
| <div class="spacer"> |
There was a problem hiding this comment.
What does the spacer class suppose to do?
views/index.html
Outdated
| <label for="secret_identity">Secret Identity</label> | ||
| <input name="secret_identity" type="boolean" placeholder="Secret Identity?"> | ||
| <button type="submit" type="button" class="btn btn-primary">Save New Hero</button> | ||
| <button type="button" class="btn btn-danger">Cancel</button> |
There was a problem hiding this comment.
I would do a reindent for the block of code between form to make it easier to read. Not sure if its github that mess up rendering your code online.
There was a problem hiding this comment.
Overall, a good attempt (especially given your overheating computer). You have a couple of bugs with how delete is working that reveal some underlying gaps in understanding, specifically around when to make the AJAX request for delete (after button is clicked) and how to pass a callback function as an argument.
| app.get("/api/profile", controllers.profile.index); | ||
| app.get("/api/heroes", controllers.heroController.index); | ||
| app.post("/api/heroes", controllers.heroController.create); | ||
| app.delete("/api/heroes/:Id", controllers.heroController.delete) |
There was a problem hiding this comment.
A little weird to use capital letters for your params (although it obviously works)
| } | ||
| ] | ||
|
|
||
| // superHero.forEach(function(new_hero){ |
There was a problem hiding this comment.
This code looks helpful! Sad that it's commented out, so your seed file doesn't get to do anything.
| $.ajax({ | ||
| method: "GET", | ||
| url:"/api/profile" | ||
| }) |
There was a problem hiding this comment.
It's weird that you make this AJAX call without it doing anything; you could remove this call.
|
|
||
|
|
||
| // Function to show seeded DB | ||
| function displayHero(heroes){ |
There was a problem hiding this comment.
This function is named displayHero singular, but its parameter is heroes plural; this is one of those things that works, but will trip you up if you ever forget that this function is named singularly but takes plural arguments.
| $("#hero-list").on("click", ".btn-danger", removeHero()); | ||
| // DELETE Ajax Call | ||
| $.ajax({ | ||
| url: "/api/heroes/:Id" + removeHero(), |
There was a problem hiding this comment.
This AJAX call is in the middle of your code, not actually attached to the delete button at all, and it uses the literal string ":Id" instead of the actual ID of a hero.
| $(this).trigger("reset"); | ||
| }); | ||
| // Delete button actions on click event | ||
| $("#hero-list").on("click", ".btn-danger", removeHero()); |
There was a problem hiding this comment.
You try to pass removeHero as an argument here, but call it instead... this is the difference between getTwo (a function) and getTwo() (a number). You want to pass the function, removeHero, as the argument, because that's the code you want executed after the button is clicked.
| }); | ||
| // Delete Function | ||
| function removeHero(data){ | ||
| let deletedHero = $(this).parents(".data-hero-id").data(".hero.-id") |
My delete button is able to get the data to remove, but the button itself does not work.
if you are able, please give me some tips on how to get it to work, that would be great.