Video: Use the REST API in JavaScript

You can use the REST API in JavaScript on a web page. Let's look at an example where you can update the last name for a contact using a web page. The input fields are ID and New Last Name. When you provide the required values and click the 'Change Name' button, the last name of the contact is updated to the provided value. In this example, you use the PATCH operation to update the data for a Contact object using JavaScript.

Note:

Do not use the code shown in this example in a production environment.

To update a Contact object using JavaScript:

Create a web page using HTML and JavaScript by using a text editor such as Notepad++.

Create an HTML form that takes the ID and Last Name and calls a JavaScript function. For example:

<form id="inputForm">
ID: <input type="text" id="cid">
<br>
New Last Name: <input type="text" id="lname">
<br>
<button onclick="changeName();">Change Name</button>

In the JavaScript function, get the last name entered in the form. For example:
```
<script>
function changeName()
{
  var lname = document.getElementById('inputForm').lname.value;
```
Instantiate the Contact object to be updated. For example:
```
var contact = new Object();
contact.name = new Object();
contact.name.last = lname;
```
Note that the name of a contact is itself an object and one of its properties is 'last' which you set to the last name from the input form.
Use the 'stringify' method of the JSON class to turn that into a string to be sent with the PATCH request. For example:
```
var data = JSON.stringify(contact);
```

From the form, get the ID for the contact to be changed and use that to create your URL. For example:

var cid = document.getElementbyId('inputForm').cid.value;
var url = "https://sitename.yourdom.com/services/rest/connect/v1.3/contacts"+cid;

Instantiate an XMLHttpRequest object and use its open() method with the verb type and the URL for the resource being updated. For example:
```
var req= new XMLHttpRequest();
req.open("POST",url);
req.setRequestHeader("X-HTTP-Method-Override","PATCH");
```
Note:
The example uses the POST operation because sometimes the browser or client application doesn't support PATCH requests or sometimes a network blocks them. To work around the issue, you can make a POST request and add a header with X-HTTP-Method-Override with a value of PATCH. This is called HTTP tunneling.
Set the Content-Type to text/html, set the content length to the length of the variable named data which holds that string, and set connection to automatically close when the call completes. For example:
```
set.RequestHeader("Content-Type","text/html");
set.RequestHeader("Content-length", data.length);
set.RequestHeader("Connection","close");
```
Provide the credentials required to authorize the code to access the site and set the authorization type to basic and include the encoded string. For example:
```
var auth = btoa("Admin1:Admin1234");
req.setRequestHeader("Authorization","Basic "+auth);
```
Add the code to execute the request call by sending the data. For example:
```
try
{
    req.send(data);
}
catch(err)
{
    alert(err.message);
}
```
Save and close the HTML file.
In the Agent Desktop, verify the details of the contact you plan to update.
Open the HTML page in a web browser and authorize scripts in case they are blocked.
Enter values for ID and New Last Name and click Change Name.
In the Agent Desktop refresh the contact. It should show the new last name.

Related Topics

Use the B2C Service REST API in JavaScript (video)