In this project, we've had to learn how to add an API to a webpage. I chose an API that shows the prices of fuels in countries from around the world. These fuels weren't only gasoline, but also gas, diesel and other fuels. To add the API, first, we had to search it, then get an API adress and an APIkey (which will allow us to use it, as it is in another server). Once this is done, we have to put it into the .js document of the webpage. In my case, as my API was in XML, I had to do some extra code to be able to use it. My code for this was this one:
let url1="https://www.globalpetrolprices.com/api_gpp.php?cnt=";
let url2="&ind=gp,dp,lp,kr,ho,et,me,er,ere,bo,wt,op,wgp,wdp&prd=latest&uid=1674&uidc=876ef3fac33f4293dfb267266db63017";
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function x () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById('API').textContent = xhr.responseText;
}
if (xhr.status == 404) {
console.log ('File or resource not found');
}
}
};
xhr.open('GET', url1+'DZ,AD,AR,AW,AU,AT,BB,BY,BE,BO,BR,BG,BF,MM,KH,CM,CA,CV,KY,CL,CN,CO,CR,HR,CY,CZ,DK,DO,EG,SV,EE,FJ,FI,FR,GE,DE,GH,GR,GD,GT,HN,HK,HU,IS,IN,ID,IE,IL,IT,CI,JM,JP,JO,KE,KW,KG,LA,LV,LB,LT,LU,MK,MW,MY,MT,MU,YT,MX,MD,ME,NA,NP,NL,NZ,NI,NO,OM,PK,PA,PE,PH,PL,PT,QA,RO,RU,RW,LC,RS,SL,SG,SK,SI,ZA,KR,ES,LK,SR,SE,CH,TW,TZ,TH,TN,TR,UG,UA,AE,GB,UY,US,VN,ZM'+url2,true);
xhr.send();
This code, made the API's data apear in the webpage, but, here's the frist problem. There was the CORS problem (cross-origin resource sharing). This error happens when you have to get data from another server and you are not allowed, either for security or just because the owner of the server doesn't want to. So, what I did was to install a plugin in Google Chrome called "Allow CORS". This plugin worked and now I could see all the data in my webpage. But there was another thing to do. We had to classify that data into some categories and be able to search what we want, for example, if we want to know the price of those fuels in the USA, we should be able to write USA in a searcher and then, only the prices of the USA should be shown. To do that, first we had to create a searcher and a button in an .html document. This was my code:
Write a city:
Until here, everything was fine. But now that we have the code, we have to link that button with the data, so I tried doing this code:
function setup() {
createCanvas(2000,800);
var button = select("#submit");
button.mousePressed(priceAsk);
input=select("#country");}
And then, I added this:
function priceAsk(){
var url = url1 + input.value() + url2;
loadJSON(url, gotData);
}
And finally this:
function gotData(data){
price = data;
And here's the problem. There was an error that said "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0". I searched a lot about this problem, but nothing that I found worked. So, as I don't know how to solve this problem, this is all that I have done in this project.
A part from trying to make the API work, I also customized the webpage by adding songs, images and changing the webpage tab. To do these things I used these codes:
To add songs:
To add images:
To change the webpage tabs: