# 07 - Update an Item

In this module, we'll update the item that is returned from the GET request and displayed in the input field.

## CODE

Add the following code to your `03-auth-test.js` file.

```javascript
/***************************************
 * PUT to authtest/update/:id
*************************************/
function updateItem() {
    let postIdNumber = document.getElementById("updateNumber").value; 
    let authTestDataInput = document.getElementById('updateValue').value; //1

    const fetch_url = `http://localhost:3000/authtest/update/${postIdNumber}` //2
    const accessToken = localStorage.getItem('SessionToken')

    let authInputData = { authtestdata: { item: authTestDataInput } }; //3
    const response = fetch(fetch_url, {
        method: 'PUT', //4
        headers: {
            'Content-Type': 'application/json',
            'Authorization': accessToken
        },
        body: JSON.stringify(authInputData) //5
    })
        .then(response => {
            return response.json();
        })
        .then(data => {
            console.log(data) //6
            var myItem = document.getElementById('newItemValue') //7
            myItem.innerHTML = data.authtestdata; //7
            fetchAllFromAuthRoute(); //8
        })
}
```

1. We get the value of the input provided from the user for both the `updateNumber` and `updateValue` fields and assign each to a variable.
2. Like before, we pass in the input from the user to the url with a template literal.
3. We create an object that packages up our request. We capture the value of `authTestDataInput` and store it in the variable `authInputData` variable.
4. We are doing an update method, so this will be a `PUT` request.&#x20;
5. Just like we did in past `POST` methods, we use the `stringify` method to convert the object to a JSON object.
6. We print the response to our fetch to the console.
7. We make a reference to the `<label>` in step 12 (Update Single Item), then set its value to the data we put in the database.
8. We run the `getall` function again and print the new contents of the database to the console.

## TEST

1. Make sure that the server and client are running.
2. Press the `GET Single Item` button on Step 11. That label should populate.
3. Change the text in the input field while keeping the same ID# in the input field of Step 12 so that it is something different than what you had.
4. Press the `Update Item` button.&#x20;
5.  You should see the following response in the console. A label will appear in Step 11 containing the new data, and the current contents of the database should also print to the console after the update runs:&#x20;

    ![screenshot](https://785407262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfspjIVOP2BrMNl%2F-LAU8cHEwYbpO3Obye5i%2F-LAU8gyHOYLbgJkxGIDo%2F07-update-item.PNG?generation=1524162310144171\&alt=media)
6. Go ahead and refresh the page. You don't need to turn off the Client or Server.
7. Press the `GET Single Item` button on Step 11. The label should populate again.
8.  You should see that the newly updated data in the label and console message:

    ![screenshot](https://785407262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfspjIVOP2BrMNl%2F-LAU8cHEwYbpO3Obye5i%2F-LAU8gzshZjzKf-AWAGk%2F07-update-item-2.PNG?generation=1524162321436719\&alt=media)
9. We might also suggest that you check in Postgres to be sure that you have successfully added the data to the database.

## Getting Fancy

While we're here, let's mess around about with the stuff we're getting from the database. Go to your `index.html` file and look for Step 12. We're going to add a little bit to one of the input fields:

```markup
                <tr>
                    <th scope="row">12</th>
                    <td>Update Single Item
                        <code>/authtest/update/id</code>
                    </td>
                    <td>
                        <input type="text" id="updateNumber" placeholder="Post ID #" onkeyup="showCurrentData(this)"/> <----- ADD THIS
                        <input type="text" id="updateValue" placeholder="New Data"/>
                        <button onclick="updateItem();">Update Item</button>
                    </td>
                    <td>
                        <label id="newItemValue"></label>
                    </td>
                </tr>
```

You've used listeners in the past, but this time instead of adding one in JavaScript, we're using the HTML attribute `onkeyup`. This listener looks for a key on the keyboard being released; in other words, after you press the key down, it waits until a key is released then does whatever you tell it to. \
&#x20;We're adding the listener to the `updateNumber` input field, so anytime a key is released while that field is focus (i.e. we're typing something in the field), the function attached to the listener will run. `this` is passed as a parameter into our function. Here, `this` refers to the input field itself, which will allow us to easily access the value of the field in out function. \
&#x20;If you look at the button, you can see another one of these listener attributes `onclick`. That one allows us to make the button do something without having to make it a `submit` type. In fact, all of the buttons on this page have that listener attached.

## showCurrentData()

The goal of this listener is to automatically search our database for an `id` that matches what we've entered into the `updateNumber` field, then populate the `updateValue` filed with the data that is returned. Add this code to the bottom of your `03-auth-test.js` file:

```javascript
function showCurrentData(e) { //1
    const fetch_url = `http://localhost:3000/authtest/${e.value}` //2
    const accessToken = localStorage.getItem('SessionToken')

    fetch(fetch_url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': accessToken
        }
    })
        .then(response => {
            return response.json();
        })
        .then(function (response) {
            console.log(response);
            var myItem = document.getElementById('updateValue'); //3
            if (!response) return; //4
            else myItem.value = response.authtestdata; //5
        })
}
```

## Analysis

1. `e` is the default variable name for an Event Listener. Here, `e` represents the input field `updateNumber`, which was passed as a parameter using `this` on the HTML page.
2. We pass the value of the input field supplied by the user directly into the URL with a template literal. Because `e` is already defined as the input field, we don't need to use a function to get another reference to it.
3. We call the DOM element we want to modify and set it to a variable to be accessed later.
4. If no item in the database matches the `id` we've supplied, the response comes back undefined. A blank return statement tells the program not to return anything and just to move on. Remember that not only does the `id` have to match what's in the database, but `user.id` also has to match the `owner` property, signifying that the current user is the one who entered it.
5. We could use `innerHTML` to set the value, but that method doesn't work with `<input>` elements. Instead, we use `value` to insert our data into the field.

Again, this function will not run until a key is lifted after being pressed.

## Testing

1. Your client and server should still be running; if not, restart them.
2. Refresh your browser, then type a number into the first field in step 12.
3.  If nothing in the database matches the `id` you've entered, you should see something like this:

    ![no match](https://785407262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfspjIVOP2BrMNl%2F-LAU8cHEwYbpO3Obye5i%2F-LAU8hQo0XhQ-q0LgfHC%2F07-update-keylogger-fail.png?generation=1524162319881042\&alt=media)
4.  If a match is found, you should see something like this:

    ![success](https://785407262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfspjIVOP2BrMNl%2F-LAU8cHEwYbpO3Obye5i%2F-LAU8hScO4fo313kL_Lk%2F07-update-keylogger-success.png?generation=1524162319094218\&alt=media)
5. You can then change the text however you'd like. Click `Update Item` and refresh your database to make sure it worked.

This process allows you to see what's in the database before you replace it. Most users, if not all, won't have direct access to the database, so this is one way that can show them what's already saved for a particular item.
