Как преобразовать данные из внешнего API в HTML, используя AJAX

Question

Я новичок в WordPress, и у меня мало знаний по кодированию. Я хотел получить немного данных из внешнего API и отобразить эти данные на моем сайте WordPress html область.

вот внешний API: https://www.hpb.health.gov.lk/api/get-current-statistical

API содержит много деталей. Мне не нужны все из них. Мне просто нужно 4,5 из них .. (например: local_new_cases, update_date_time, local_total_cases, local_deaths, local_recovered) вот подробности: https://www.hpb.health.gov.lk/en/api-documentation

вот внешний веб-сайт: https://www.hpb.health.gov.lk/en

Я создал некоторый код с помощью stackoverflow, но Я не знаю, как проанализировать немного данных в моем событии обучающей кнопки html area.some. Мне не нужно событие нажатия кнопки.

Я создал следующий код: (это означает, что я взял данные из 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;

                }
        });   
}

Теперь я хочу проанализировать несколько данных (например: local_new_cases, update_date_time, local_total_cases, local_deaths, local_recovered ) из API, в html код. Как это сделать? Пожалуйста, помогите мне спасти мою жизнь. Спасибо.

Answer 1

Вы можете получить данные, используя response.data, и получить соответствующее значение, используя value['something'], как показано ниже:

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>

Обновление 1 : здесь, в коде ниже, я добавил тег html, вы можете добавить тег к вашим данным, как показано ниже и сделайте изменения согласно вашему требованию

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>