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 Displaying the Photos

Andy Goodman
Andy Goodman
14,207 Points
Posted by 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

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

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
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!