Hello,
I am a newbie a want to make a simple static corona tracker website but the problem is that the data which i want to use is in json
format.
So my question is how can i generate a dynamic html table from json response i get from the API?
For Reference, link of json data is
https://covid-rest.herokuapp.com/pakistanThe api response is of the following type:
{"code":200,"message":"OK","data":{"country_name":"pakistan","total_cases":"2291","new_cases":"173","total_death":"31","new_death":"4","total_recovered":"107","active_cases":"2153","critical_cases":"12","tot_cases_per_million":"10","tot_death_per_million":"0.1"}}
Top comments (10)
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 😊