Making this request in ES6 (with Fetch API)

Question

I'm trying to rewrite this request using ES6 features and the Fetch API. My problem is with the 2nd parameter of the $.getJSON method, where we create an object to be sent with the request so we can ask for specific properties (tags, format, etc.). I haven't been able to find anything resembling that with the Fetch API.
I have this so far:
```
const button = document.querySelectorAll('button');
button.forEach((e) => {
  e.addEventListener('click', function (event) {
    button.forEach((e) => {e.classList.remove("selected")});
    (event.target).classList.add("selected");
    const flickrAPI = 'https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
    let animal = (event.target).textContent();
    let options = {
    tags: animal,
    format: "json"
    };
    function displayPhotos(data) {
}
fetch(flickrAPI)
  .then((response) => response.json)
  // HOW DO I USE THE 'OPTIONS' VARIABLE CREATED ABOVE
  .then((data) displayPhotos(data){
  // Function to be written in the next video
}); // End displayPhotos      
  }); // End event handler
}); // End forEach
```

Tobiasz Gala · Answer

I see that you are using flickr public API. There are parameters you can enter to retrieve data. I think you know what to do :)
js
https://api.flickr.com/services/feeds/photos_public.gne?tags=animal&format=json

Brendan Whiting · Answer

I’m looking at the docs here (https://api.jquery.com/jquery.getjson/). It looks like the second parameter is an object or string (object in our case) that’s appended to the URL as a query string (https://en.wikipedia.org/wiki/Query_string). 
According to this StackOverflow answer (https://stackoverflow.com/questions/35038857/setting-query-string-using-
fetch-get-request), a good way of adding query params to the url is to build them using the URL and URLSearchParams objects.
There's a video in a Treehouse course on HTTP Basics (https://teamtreehouse.com/library/http-basics/introduction-to-http/sending-data-with-a-get-request) that might be a good refresher.

Welcome to the Treehouse Community

Looking to learn something new?

Félix Guérin

Félix Guérin

Making this request in ES6 (with Fetch API)

2 Answers

Brendan Whiting

Brendan Whiting

Tobiasz Gala

Tobiasz Gala