In this example, we will demonstrate how we can consume the JSON response returned by Metamug REST API.
Let us start by creating a backend with name "crm" and create a database table called "customer" using the following query
CREATE TABLE customer(
customer_id INT NOT NULL AUTO_INCREMENT,
customer_name VARCHAR(255),
PRIMARY KEY (customer_id)
);
We can insert data in the table using INSERT queries
INSERT INTO customer (customer_name) VALUES ("Adam Smith");
INSERT INTO customer (customer_name) VALUES ("John Doe");
Now we shall create a resource file named "customer" and define a GET request inside it which will return JSON containing all records inside the customer table as shown
customer.xml
<Resource xmlns="http://xml.metamug.net/resource/1.0" v="1.0">
<Desc> Customer Information </Desc>
<Request method="GET">
<Desc> Return all records from "customer" </Desc>
<Sql> SELECT customer_id,customer_name FROM customer </Sql>
</Request>
</Resource>
On saving the above resource file, a REST API will be generated having URL endpoint
http://localhost:7000/crm/v1.0/customer
To get customer data we shall make HTTP GET request to this URL and get JSON as shown
[
{"customer_id": 1, "customer_name": "Adam Smith"},
{"customer_id": 2, "customer_name": "John Doe"},
]
Metamug sends json array as result. In the below example we will using for each to loop over the result and appending each item in the html list.
The first step of attaching the values received via ajax is identifying the ul
tag in the document.
var demo = document.getElementById("demo"); //grab the element
We will use JQuery's popular AJAX method to make the request and ES6 for processing the response.
Here's the whole code.
<ul id="demo"></ul>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "http://localhost:7000/crm/v1.0/customer",
success: names => {
var demo = document.getElementById("demo"); //grab the element
names.forEach( name => {
var li = document.createElement('li') //create li
li.innerHTML = name.CUSTOMER_NAME; //write inner html
demo.appendChild(li) //append to ul
})
}
});
</script>