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

Jimmy Wu
seal-mask
.a{fill-rule:evenodd;}techdegree
Jimmy Wu
Front End Web Development Techdegree Student 10,816 Points
Posted by Jimmy Wu
.a{fill-rule:evenodd;}techdegree
Jimmy Wu
Front End Web Development Techdegree Student 10,816 Points

HTTP-Based Public Key Pinning is deprecated. Chrome 69 and later will ignore HPKP response headers

I got this warning in my console, thus preventing me from getting photos from Flickr. "HTTP-Based Public Key Pinning is deprecated. Chrome 69 and later will ignore HPKP response headers. (Host: api.flickr.com)".

Anyone knows how to solve this?

Sarika Rani
Sarika Rani
11,214 Points
Sarika Rani
Sarika Rani
11,214 Points

can i see your code plz ?

Gari Merrifield
Gari Merrifield
9,597 Points
Gari Merrifield
Gari Merrifield
9,597 Points

I would check out the Flickr API documentation, there has probably been a recent ( this year ) change that may work around that issue. https://www.flickr.com/services/api/

2 Answers

James Churchill
STAFF
James Churchill
Treehouse Teacher
James Churchill
James Churchill
Treehouse Teacher

Jimmy,

I believe the photos should still display regardless of the warning that displays in the console. Can you please post your JavaScript code for review?

Thanks ~James

Youssef Gerges
.a{fill-rule:evenodd;}techdegree
Youssef Gerges
Front End Web Development Techdegree Student 7,980 Points

I am getting the same error

$(document).ready(function(){

$('button').click(function(){
    $('button').removeClass("selected");
    $(this).addClass("selected");

    var flickerAPI = 'https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
    var animal = $(this).text();
    var flickerOptions = {

        tags:animal,
        format: "json"

    };

    function displayPhotos(data){

        var photoHTML = '<ul>';
        $.each(data.items, function(i, photo){
            photoHTML += '<li class="grid-25 table-grid-50">';
            photoHTML += '<a href="' + photo.link + '" class="image">';
            photoHTML += '<img src="' + photo.media + '"></a></li>';
        });

      photoHTML+= '</ul>';
      $("#photos").html(photoHTML);
    }

    $.getJSON(flickerAPI, flickerOptions, displayPhotos)
});

});

Youssef Gerges
.a{fill-rule:evenodd;}techdegree
Youssef Gerges
Front End Web Development Techdegree Student 7,980 Points

it is working now. i forgot the .m in photo.media.m

Cory Wallace
Cory Wallace
14,106 Points
Cory Wallace
Cory Wallace
14,106 Points

I'm getting the same error message. Here is my code:

$(document).ready(function(){
  $('button').click(function (){
    $("button").removeClass("selected");
    $(this).addClass("selected");
    var flickrAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $(this).text();
    var flickrOptions = { 
      tags: animal,
      format: "json"
    };
    function displayPhotos (data) {
      var photoHTML = '<ul>'; // creates an unordered list to store the photos in
      $.each(data.items, function(i, photo){
        photoHTML += '<li class= "photos">';
        photoHTML += '<a href="' + photo.link + '" class = "image">';
        photoHTML += '<img src="' + photo.media.m + '" ></a></li>';
      });
      photoHTML += '</ul>';
      $('photos').html(photoHTML);
    }
    $.getJSONP(flickrAPI, flickrOptions, displayPhotos);
  }); //end buttonc lick
}); // end ready
Diana Ci
Diana Ci
18,672 Points
Diana Ci
Diana Ci
18,672 Points

I had the same problem....the photos would't display. In the console " error $(document).ready(function(){});" The code was perfectly correct. The solution for me was: I've noticed in the Workspaces a directory named "finished", there where all the code, the finished project. So this means all files where double. I deleted this directory "finished" and the page worked fine, the photos displayed.