JavaScript AJAX Basics (retiring) AJAX and APIs Displaying the Photos

Andy Goodman
Andy Goodman
14,207 Points

404 error

Hi, the images don't load for me, I get a broken image icon instead.

I get two warnings in the JavaScript console:

HTTP-Based Public Key Pinning is deprecated. Chrome 69 and later will ignore HPKP response headers. (Host: api.flickr.com) jquery-1.11.0.min.js:4

GET http://port-80-659kgkg6qk.treehouse-app.com/'%20+%20photo.media.m%20+%20' 404 (Not Found) '%20+%20photo.media.m%20+%20':1

A snapshot of my code can be seen here: https://w.trhou.se/mcnmo6r71l

Any help would be greatly appreciated.

Thanks Andy

2 Answers

Hi Andy,

The issue is with the concatenation in your displayPhotos() function.

    function displayPhotos(data) {
        let photoHTML = `<ul>`;
        $.each(data.items, function(index, photo) {
            photoHTML += `<li class="grid-25 tablet-grid-50">
                          <a href="' + photo.link + '" class="image">
                          <img src="' + photo.media.m + '" /></a></li>`;
        });
        photoHTML += `</ul>`;
        $('#photos').html(photoHTML);
    }

Notice that you use both ` (backtick) and ' (single quote) characters for your concatenation. You are saying that everything between the backticks should be interpreted as a string. So rather than the value of photo.link being displayed to the user, the string " + photo.link + " is displayed instead. Same for photo.media.m.

Try changing it to:

    function displayPhotos(data) {
        let photoHTML = `<ul>`;
        $.each(data.items, function(index, photo) {
            photoHTML += `<li class="grid-25 tablet-grid-50">
                          <a href="` + photo.link + `" class="image">
                          <img src="` + photo.media.m + `" /></a></li>`;
        });
        photoHTML += `</ul>`;
        $('#photos').html(photoHTML);
    }

And the value's inside photo.link and photo.media.m should be printed out instead.

You can see the difference in syntax highlighting, when photo.link refers to a value, it's pink, when photo.link is part of a string, it's brown.

See Template Literals

Hope this helps :)

Andy Goodman
Andy Goodman
14,207 Points

Thanks for the quick response. That sorted it :)

Think I was going code blind from staring at it too long!