How to grab REST API data and display in a html page - html

Question

Hi i am trying to get data from my LMS's rest API and then display it on a html page, I have a URL and an authorization bearer key
I was provided with some examples of how I should show my url and where to place my Authorization key see below
GET https://example.thoughtindustries.com/incoming/v2/ping
Example Request
CURL https://example.thoughtindustries.com/incoming/v2/ping -H 'Authorization: Bearer APIKEY'
I get a call back using the CURL in Visual Studio code so i know it can be pulled.
I found this method online which I thought would work
$.ajax({
url: "https://api.apiscience.com/v1/monitors/1572022",
headers: {
"Authorization": "Bearer NN_6xxxxx"
}
}).done(function(data) {
$('#monitor_data').append(JSON.stringify(data))
});
<h2>Response Data</h2>
<div id="monitor_data">
<!--location for Javascript to print data-->
</div>
I thought this would be the answer when replacing with my own URL and key but nothing happened. Do I need to include the -H somewhere and if so what might that look like?

Answer 1

It's easy as you have already done this. Write a get ajax call to your API and render your html part from the response you get from the API.
Take a sample example:
var getGamePeriod = function(){
$.ajax({
type: "GET",
url: "yourendpointhere?param=val",
contentType: "application/json",
dataType : 'json',
success : function(response){
if(response && response.isSuccess){
// do your stuffs here..
}
},
error : function(data,textStatus,errorMessage){
alert( textStatus + " " + errorMessage);
}
});
}
Of course you need to pass header or auth token if it is required to access the API. Place this method under document.ready method.