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

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
231,007 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