JSFiddle - React, Tailwind, and code Playground

by E D

JavaScript

//jsfiddle javascript parameter: "onload", library used: jquery

// information about the indicator, the country and time span we want:
var indicator="AG.LND.ARBL.ZS";
var iso3code="VNM";
var time=5;
	
// url of the query
var url = "https://api.worldbank.org/v2/countries/"+iso3code+"/indicators/"+indicator+"?per_page="+time+"&MRV="+time+"&format=json";
console.log(url)

//---------------- get, parse and store the data --------------------------- 

// create set some empty variable to host data
var array_data = [] // to store data for the X axis
var year_list = [] // to store data for Y axis
    
 $.ajax({ 
    url:url,
   complete: function(json) {
      data= JSON.parse(json.responseText);
      console.log(json.responseText)
      $.each(data[1], function(i, data) {
        //Store indicator name
        country_name = data.country.value;
        // Store indicator label
        indicatorName = data.indicator.value;
        // fill the date array
        year_list.push(data.date) //  .reverse() on the list to sort it
        // fill the string data array 
        array_data.push(Math.round(data.value));
      });
		
    // check the result
     document.write("COUNTRY = "+country_name + "<br>")
     document.write("INDICATOR = "+indicatorName+ "<br>")
     document.write("YEAR LIST = "+year_list+ "<br>")
     document.write("VALUE LIST = "+array_data+ "<br>")
     document.write("<br> NB API response from URL "+url+" : <br><br>")
     document.write(json.responseText)
     
  }, error: function() {
      console.log('there was an error!');
    }
  }); // end of getjson function