Display list with ajax and metamug

In the below example, we will demonstrate how we can consume the json result generated by metamug api.

https://api.metamug.com/crm/v1.0/customer

To get Customer data we hit the above URL with a GET request and get json in following format.

[
    {"customer_id": 1, "CUSTOMER_NAME": "Adam Smith"},
    {"customer_id": 2, "CUSTOMER_NAME": "John Doe"},
]

JS Example with ES6

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 recieved 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 perfom the request. And ES 6 for making the functions.

Code

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: "https://api.metamug.com/irfu/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>