Edit Stored Data using the Cloudflare KV Key
We can store and retrieve our data from our KV but not the status of whether or not it's checked off. To do that, we create a function called completeTodo that will target the checkbox, find the todo based on its id, flips the boolean from false to true and saves that data, and then updates our to-dos.
Instructor: [0:00] Now if I refresh, you can see that window.todos is an array here, that has a JavaScript object inside of it, which represents our todo. The ID here is 1, name, Finish My Egghead Course, and completed is false.
[0:13] If I click the checkbox here and I refresh the page, you can see it doesn't persist. The reason for that is, we need to add one more call here, which updates the todo list, setting this todo as complete, and then also updating Workers KV with this change, not just on new todo list items.
[0:29] Let's look at how to do that. In order to do this, we need to understand how this template is set up. If I inspect this code here, you can see that when I fleshed out the UI for this, I set up this corresponding data-todo attribute, which has an ID of 1. This matches the ID of that todo in this window.todos.
[0:49] Now, to do that, we use element.dataset.todo and set it to the value of the todo.id. This is important, because when we complete a todo, we'll use, basically, the same functionality to look up that todo and mark it as completed.
[1:04] Let's make a new function called completeTodo. Inside of it, I'm going to find the checkbox, which is the event.targetvalue that's going to be corresponding with the checkbox being checked.
[1:15] That is when we click the checkbox and mark it as completed, this function will be called, and the checkbox element itself will be available as event.target.
[1:25] Next, I'm going to target the todo element, which is going to be the parent node of that checkbox.
[1:31] Down here, we have this div, which represents the todo element. Inside of that, we have a checkbox, which gets appended as a child. When the check box is the target of an event, parent node represents the div that contains it.
[1:46] I'm now going to construct a new todo set, which is going to be an empty array with the concatenated window.todos inside of that array. It's going to be a new copy of that todo set that has all of the existing todos inside of it.
[2:01] Then I'm going to find the todo which matches the ID with the corresponding todo element.dataset.todo. This means I'm going to look through the entire set of todos inside of this array, and look for the one that matches the dataset.todo value that is being called on this checkbox.
[2:21] For instance, when I check this, we know that this is going to be an ID of 1. The corresponding function that gets called is going to look inside of this array for an ID that matches that checkbox elements pair and element here.
[2:34] Again, that is the data todo of one. We're basically looking up a corresponding data attribute for the data that we've been passing from Workers KV.
[2:44] Next, we're going to mark it as completed, or in fact by toggling todo.completed, we can mark it as incomplete as well. We'll flip this Boolean value from either true to false or false to true.
[2:55] We'll also update window.todos by assigning it to this new todo set. Basically, replacing that data with the updated, that is this todo.complete marked as either incomplete or complete, and replacing it in our window.todos variable.
[3:13] Finally, we'll call updateTodos, which is the function we've already defined up above, to make a PUT request to our Workers function, passing in window.todos here as the body.
[3:24] Again, because we made this so simple, that is passing the entire set of todos as the body here, we don't have to do anything specific when it comes to making an update to our todos inside of our fetch request. We once again say, "Hey, here's the new set of todos. Let's send all of that up to Workers KV and update the KV key in a corresponding way."
[3:45] With completeTodo set up, the last thing we need to do is attach this to the checkbox element. Down where we construct our checkbox, I'm going to say, checkbox.addEventListener. The name of the event will be Click. Then, the function that gets called is completeTodo.
[4:02] Any time that this checkbox gets clicked, or any of the checkboxes on any of the todos, it'll call this corresponding function, completeTodo, which will update the data and send it back to KV.
[4:14] Now, if I refresh the page, I have the Network tab open here, which will allow me to look at any incoming and outgoing requests. Specifically, I filtered by the fetch/XHR option, which shows any client-side request coming out of my application.
[4:30] To show that this all works, let's click this checkbox here to mark this task as completed. You can see that a fetch request went out to my Workers function. If I open it up, it's a request method of PUT. If I scroll down here to the request payload, you can see that it's sending this array here, which has an object inside of it, Finish My Egghead Course, and completed set to true.
[4:52] It's sending this updated data up to KV. Then, if I refresh the page, you can see that that data has been persisted now. My task is officially completed, not just on the frontend, but also in Workers KV as well.