I like to build cool things, work with nice people and help others where I can. Currently I'm an engineering manager for a fintech startup and historically a serial founder & freelancer software dev.
Location
München, Deutschland 🇩🇪
Education
The Open University
Work
Engineering Manager @ Deutsche Fintech Solutions GmbH
Assuming the response always looks like that then you could do something like:
functiontranslateResponseKey(key){consttranslations=[{key:'country_name',value:'Country'},{key:'total_cases',value:'Total cases'},{key:'new_cases',value:'New Cases'},{key:'total_death',value:'Total Deaths'},{key:'new_death',value:'New Deaths'},{key:'total_recovered',value:'Total Recovered'},{key:'active_cases',value:'Active Cases'},{key:'critical_cases',value:'Critical Cases'},{key:'tot_cases_per_million',value:'Cases per million people'},{key:'tot_death_per_million',value:'Deaths per million people'}];returntranslations.find(item=>item.key===key).value;}functionrenderDataTable(data,selector="body"){constoutputContainer=document.querySelector(selector);if(!outputContainer)thrownewError("The provided selector does not exist on the page.");consttable=document.createElement("table");constheaderRow=document.createElement("tr");constdataRow=document.createElement("tr");for(letkeyindata){constheaderCell=document.createElement("th");constdataCell=document.createElement("td");constvalue=data[key];headerCell.textContent=translateResponseKey(key);dataCell.textContent=value;headerRow.appendChild(headerCell);dataRow.appendChild(dataCell);}table.appendChild(headerRow);table.appendChild(dataRow);outputContainer.appendChild(table);}asyncfunctionget(url,config={}){constresponse=awaitfetch(url,config);constdata=awaitresponse.text();console.log({data});returndata;// return JSON.parse('{"data":{"country_name":"pakistan","total_cases":"2386","new_cases":"268","total_death":"32","new_death":"5","total_recovered":"107","active_cases":"2247","critical_cases":"12","tot_cases_per_million":"11","tot_death_per_million":"0.1"}}');}asyncfunctionmain(url){const{data}=awaitget(url);renderDataTable(data);}consturl="https://covid-rest.herokuapp.com/pakistan";// const url = "https://jsonplaceholder.typicode.com/photos";main(url);
Something like that, there may be some mistakes since I typed this on my phone real quick for you but if you need support I can check later on my computer when I get home or something.
Update:
The code was fine when I wrote it earlier BUT the API endpoint you are trying to access doesn't have a Access-Control-Allow-Origin header set on it and so you cannot request it via the browser using fetch or XMLHttpRequest. If you check the console when you run this code it will tell you that it failed to fetch for this exact reason.
To show an example of a working request I added a commented out line just above the final line of the code snippet, if you comment out the first url constant and uncomment the other one and check the console it will show you data as expected.
To see the expected output without making a request you can use the code as it is just now but in the get function, you can comment out all the code and uncomment the last line of that function body to see how it would look if it were to return properly.
Until that endpoint has the Access-Control-Allow-Origin header set though, you won't be able to access the data like this unless you do it server side for example with a reverse proxy.
Hopefully that all makes sense and if you have comments or questions don't hesitate to ask!
I like to build cool things, work with nice people and help others where I can. Currently I'm an engineering manager for a fintech startup and historically a serial founder & freelancer software dev.
Location
München, Deutschland 🇩🇪
Education
The Open University
Work
Engineering Manager @ Deutsche Fintech Solutions GmbH
I like to build cool things, work with nice people and help others where I can. Currently I'm an engineering manager for a fintech startup and historically a serial founder & freelancer software dev.
Location
München, Deutschland 🇩🇪
Education
The Open University
Work
Engineering Manager @ Deutsche Fintech Solutions GmbH
Read it twice..
Copy pasted it but couldn't understand the reverse-proxy.
Could you please more elaborate it or tell me in some simple way as i am completely newbie and just want a working resource light Covid-19 Tracker.
I like to build cool things, work with nice people and help others where I can. Currently I'm an engineering manager for a fintech startup and historically a serial founder & freelancer software dev.
Location
München, Deutschland 🇩🇪
Education
The Open University
Work
Engineering Manager @ Deutsche Fintech Solutions GmbH
I like to build cool things, work with nice people and help others where I can. Currently I'm an engineering manager for a fintech startup and historically a serial founder & freelancer software dev.
Location
München, Deutschland 🇩🇪
Education
The Open University
Work
Engineering Manager @ Deutsche Fintech Solutions GmbH
Assuming the response always looks like that then you could do something like:
Something like that, there may be some mistakes since I typed this on my phone real quick for you but if you need support I can check later on my computer when I get home or something.
Update:
The code was fine when I wrote it earlier BUT the API endpoint you are trying to access doesn't have a
Access-Control-Allow-Origin
header set on it and so you cannot request it via the browser usingfetch
orXMLHttpRequest
. If you check the console when you run this code it will tell you that it failed to fetch for this exact reason.To show an example of a working request I added a commented out line just above the final line of the code snippet, if you comment out the first
url
constant and uncomment the other one and check the console it will show you data as expected.To see the expected output without making a request you can use the code as it is just now but in the
get
function, you can comment out all the code and uncomment the last line of that function body to see how it would look if it were to return properly.Until that endpoint has the
Access-Control-Allow-Origin
header set though, you won't be able to access the data like this unless you do it server side for example with a reverse proxy.Hopefully that all makes sense and if you have comments or questions don't hesitate to ask!
Thanks a lot james...
I will check it and update the status..
thanks once again.
UPDATE:
The above code doesn't seems to work with any method bro.
I just tested all the cases I told you to try and that I already tested before my final update yesterday and the code works 100% fine..
I checked in the morning but didn't work.
let me check again
Did you even read my full comment and understand it or did you just copy paste as I expect you did...?
Read it twice..
Copy pasted it but couldn't understand the reverse-proxy.
Could you please more elaborate it or tell me in some simple way as i am completely newbie and just want a working resource light Covid-19 Tracker.
CovidAPI: covid-api.com/
Reverse proxy: en.wikipedia.org/wiki/Reverse_proxy
CORS: en.wikipedia.org/wiki/Cross-origin...
Read these and come back once you understand reverse proxy and cors or just have questions.
I also recommend the covid api I sent you and not the one you've been using currently, happy to discuss that also.
Try yourself first.. :)
Thanks a lot once again.
UPDATE:
- Finally found a way by using your provided API and some code.
- And and and learnt about CORS.
Thanks for this all help and guidance.
Hi @TechMaster
Found your post from front page.
Hopefully you did create it, possible can see your final works.
@JamesRobb Thanks for the awesome script you wrote.
You’re welcome 😊