How to parse data from external API into HTML using AJAX - php

Question

I'm new to wordpress and I have little coding knowledge.I wanted to get few data from external API and display those data in my wordpress site html area.
here is external API: https://www.hpb.health.gov.lk/api/get-current-statistical
API contains lot of details.I dont want all of them.I just need 4,5 of them..
(eg:local_new_cases,update_date_time,local_total_cases,local_deaths,local_recovered)
here is the details :https://www.hpb.health.gov.lk/en/api-documentation
here is external web site :https://www.hpb.health.gov.lk/en
I created some code by using stackoverflow,but I don't know how to parse few data into my html area.some tutorial teaching button event.I'dont want button click event.
I have created below code:(It means ,I took data from API )
var data;
$( document ).ready(function() {
getHealthData();
});
/**
*Gets data from API
**/
function getHealthData(){
$.ajax({
type : "GET",
dataType : "json",
url : "https://www.hpb.health.gov.lk/api/get-current-statistical",
data : {action: "get_data"},
success: function(response) {
alert(response);
data= response.data;
}
});
}
Now I want to parse few data(eg:local_new_cases,update_date_time,local_total_cases,local_deaths,local_recovered) from API, into html code.
How to do that? please help me to save my life.Thank you.

Answer 1

You can get data using response.data and get respective value using value['something'] like below :
var data = "";
$(document).ready(function() {
getHealthData();
});
/**
*Gets data from API
**/
function getHealthData() {
$.ajax({
type: "GET",
dataType: "json",
url: "https://www.hpb.health.gov.lk/api/get-current-statistical",
data: {
action: "get_data"
},
success: function(response) {
//getting value from server
var value = response.data;
data = "local_total_cases : " + value['local_total_cases'] + "<br/>local_deaths : " + value['local_deaths'] + "<br/>local_new_deaths : " + value['local_new_deaths'] + "<br/>local_recovered : " + value['local_recovered'] + "<br/>local_new_cases : " + value['local_new_cases'];
//putting values in div with id="data"
$("#data").html(data);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="data">
</div>
Update 1 :
Here in below code i have added some html tag ,you can add more tag to your data like below and do changes as per your requirement
var data = "";
$(document).ready(function() {
getHealthData();
});
/**
*Gets data from API
**/
function getHealthData() {
$.ajax({
type: "GET",
dataType: "json",
url: "https://www.hpb.health.gov.lk/api/get-current-statistical",
data: {
action: "get_data"
},
success: function(response) {
//getting value from server
var value = response.data;
data = "<h5>local_total_cases :</h5><b>" + value['local_total_cases'] + "</b><br/><h5>local_deaths :</h5><b> " + value['local_deaths'] + "</b><br/><h5> local_new_deaths : </h5><b>" + value['local_new_deaths'] + "</b><br/><h5>local_recovered : </h5> <b>" + value['local_recovered'] + "</b><br/><h5>local_new_cases :</h5> <b>" + value['local_new_cases']+"</b>";
//putting values in div with id="data"
$("#data").html(data);
//adding value separately
$("#something").text("local_total_cases :" + value['local_total_cases'])
}
});
}
h5{
font-size:20px;
color:blue;
}
b{
font-size:25px;
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="data">
</div>
<h3 id="something"></h3>