CODEWITHSUNDEEP
phphtmljsonajaxwordpress
Mr.Oneday
Mr.Oneday

Reputation: 47

How to parse data from external API into HTML using AJAX

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.

Upvotes: 1

Views: 491

Answers (1)

Swati
Swati

Reputation: 28522

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>

Upvotes: 1

Related Questions