💻Activity J-5.6: Finding and Using a REST interface

  • Due Feb 11, 2022 at 11:59pm
  • Points 1
  • Questions 1
  • Time Limit None
  • Allowed Attempts Unlimited

Instructions

Unit 3💻 Activity J-5.6: Finding and Using a REST interface 

For this assignment, you will find a REST service and create an application that uses it.

You can find a large number of REST services at

https://github.com/toddmotto/public-apis (Links to an external site.)

You will want to use the ones that do not have CORS (Links to an external site.) issues.  Avoid these and make sure you can access the REST service from your javascript code before you put a lot of time into developing the rest of your application.  Some of these REST services could also be investigated.

Some of these services will not work or will require money, so you will have to explore a little.

Once you have found a service you want to use, you need to figure out how to make the ajax call.

For this example, let's assume you want to display the xkcd comics. The following steps might be useful.

  1. First find the interface. I googled for "rest api xkcd" and found this documentation
  2. Then I created a small chunk of html  to make sure I understood the interface.
  3. But it doesn't work. I get the error: 
    XMLHttpRequest cannot load http://xkcd.com/info.0.json. No 'Access-Control-Allow-Origin' header is present on the requested resource.
  4. This occurs because the xkcd.com/info.0.json interface is not setting the "Access-Control-Allow-Origin:" field to allow web pages from other sites to access the REST interface (see the wikipedia article)
  5. One way of getting around this is to use a proxy server like cors-anywhere (Links to an external site.) that will insert the CORS headers. (NOTE: You may need to enable cors-anywhere for your browser. You can do that by going to https://cors-anywhere.herokuapp.com/corsdemo .)
  6. So I change my code to make a request through the proxy in this chunk of html and it works.  Notice that I used the proxy, and I inserted the "{mode: 'cors'}" parameter into the fetch.
  7. I always bring up the chrome developer tools to inspect the object that is returned by a service so I will know what fields I can access.

I could also google for "xkcd CORS API" and found this URL that also provides the CORS header.

https://xkcd.now.sh/?comic=latest

You could also get the image by creating an image tag with something like this:

let everything = "<p>";
everything += json["alt"];
everything += "</p>" + '<img src="'+json["img"]+'"></img>"';
document.getElementById("comic").innerHTML = everything;

Hopefully, this gives you an insight into what to do to connect to a REST service.

Create a web application that accesses data from xkcd or one of these other web services.

 

Only registered, enrolled users can take graded quizzes