Fetch¶

Attention

This exercise should be done in groups and submitted as a group.

Include all group members and make sure that everyone knows how your solution works. Only one group member needs to submit the exercise on behalf of the whole group.

Download the template¶

fetch.zip

Instructions¶

Start with the following steps:

Download the zip file for this exercise and extract it into an empty directory.
Copy the file functions.js you returned in exercise 6.5 (Manipulating Stackoverflow Data) into the same directory

So far your functions have used data that was already provided to you in a separate JavaScript file but in the real world the data needs to be fetched from some external service before it can be used.

In this exercise you are going to add two new functions to the functions.js file. The first one will be a generic helper function for retrieving JSON data from external services. The second function will be more specific to the API service used but it will take advantage of the first function when retrieving data from the API.

The functions are following:

getJSON(url)

Takes one parameter url of type string or URL object

Uses window.fetch to fetch data from the URL

Parses the data to JSON and returns the JSON (technically the function returns a Promise which resolves to the JSON because fetch returns a promise)

You can make the function asynchronous if you want to or use fetch with .then() interface the choice is up to you

HINT: read the section about asynchronous JavaScript and all the code examples carefully…

getStackOverflowData (apiUrl, technologies = null)

Takes parameter apiUrl of type string

Takes another parameter technologies of type Array<string> (Array values should be strings). This parameter is optional and has a default value of null.

If the second parameter is provided and it is not empty you should build a query string of the form ?tech=item1;item2;item3 and append that to the apiUrl The items are to be separated by a semicolon (“;”). Be careful to properly encode all the items in the query string because there are some characters which are not allowed in URLs.

Read more on creating the query string (also called search parameters)

Fetch data using the getJSON(url) function and return the JSON

Again this function technically returns a Promise which resolves to the JSON

Feel free to make the function asynchronous if you want to or use .then() interface of the Promise returned by getJSON(url) Again the choice is yours.

Do not rename the functions or else tests won’t be able to detect and use them. You only need to return the functions.js file.

Open index.html in your browser. If your functions are implemented correctly. You should see a familiar looking menu and table and you should be able to select different technologies and different years and everything should work as before in the earlier exercise Manipulating Stack Overflow data

You can use our API to test your function. The same API will also be used in the assignment.

Links that may provide some help:

Attention

If your submission is not accepted here are a few tips on testing your functions.

Open your index.html in the browser. Verify that your function can be found from the window by opening the JavaScript console and writing:

getJSON("https://tie-lukioplus.rd.tuni.fi/cais/api/stackoverflow/stats")

The return value should be:

Promise {<pending>}

If previous step looked fine try to write:

getJSON("https://tie-lukioplus.rd.tuni.fi/cais/api/stackoverflow/stats").then((data) => console.log(data))

Initially you should receive return value of Promise {<pending>} . After some time this should resolve to a value similar to the following:

Object { 2011: {…}, 2012: {…}, 2013: {…}, etc etc }

A+ presents the exercise submission form here.