Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) AJAX and APIs Making the AJAX Request

Félix Guérin
Félix Guérin
17,910 Points

Making this request in ES6 (with Fetch API)

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

2 Answers

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points

I’m looking at the docs here. 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.

According to this StackOverflow answer, 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 that might be a good refresher.

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

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 :)

https://api.flickr.com/services/feeds/photos_public.gne?tags=animal&format=json