How to parse data from external API into HTML using AJAX

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.

Swati · Accepted Answer · 2020-03-23 14:50:04Z

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>

edited Mar 23, 2020 at 14:50

answered Mar 23, 2020 at 14:11

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mr.Oneday Over a year ago

Swati...It's working....Have a good day..dear.. One question..., Can I put in separate places instead of one,<div id ="data"></div> ? Then I can beautify with html ,like bold,italic,h2 tag....etc

Swati Over a year ago

Yes, you can put in different places ,you need to modify your code as well according to that.

Mr.Oneday Over a year ago

you mean data1,data2,data3,,ike that ? If you don't mind ,can you update the code...?

Swati Over a year ago

see update 1 i have done changes ,Also i have add one example i.e: you can assign value to any html tag

Swati Over a year ago

that error should be coming from php code also i don't know much about this . i suggest you to asked different question for this issue.

|

Collectives™ on Stack Overflow

How to parse data from external API into HTML using AJAX

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related