Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Sanjeev Veloo
Sanjeev Veloo
4,713 Points

Keep getting this error : photos_public.gne:1 Uncaught SyntaxError: Unexpected token <

Hi everyone,

I keep getting this error, even when I break it down and just try to console.log(photo.media.m), can you spot anything wrong here?

$(document).ready(function(){

  $('button').click(function(){

    $('button').removeClass("selected");  // remove any existing classes
    $(this).addClass("selected");         // add class

    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; // Flickr API url with JSON
    var animal = $(this).text();


    var flickrOptions = {  
      tags : animal
    }

    function displayPhotos(data) {

      var photoHTML = '<ul>';

      $.each(array, function(i, photo){

        console.log(photo.media.m);

        // photoHTML += '<li class="grid-25 tablet-grid-50">';
        // photoHTML += '<a href="' + photo.link + '" class="image">';
        // photoHTML += '<img src="' + photo.media.m + '"></a></li>';

      });

      photoHTML += '</ul>';

      $('#photos').html(photoHTML);

    }; // end displayPhotos

    $.getJSON(flickrAPI, flickrOptions, displayPhotos);       // The JSON request

  }); // button function

}); // end ready

3 Answers

So that call we're making is responding in XML. So, I added a parameter to my call to return in JSON and not XML since $.getJSON() is turning the response to javascript and doesn't know what to do with the "<" character. Hence the console.log error unexpected token "<" on the first line, first character.

My variable/call is below:

var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?";

Steven Parker
Steven Parker
216,083 Points

It's not clear from just this code.

But this code probably needs an HTML and a CSS component to work. You might use a workspace "snapshot" to share everything at once to facilitate a more complete analysis.

Hunter Phillips
Hunter Phillips
9,310 Points

var flickrOptions = {
tags : animal, format: 'json'*** }

it looks like you forgot to add a property on the flickrOptions (object) variable