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

Posted by Julian Betancourt
Julian Betancourt
11,466 Points

Problems with JSON request via $.getJSON

Hi guys, I'm building the final challenge in Ajax Basics (https://teamtreehouse.com/library/ajax-basics/ajax-and-apis/stage-4-challenge-answer) but a little bit different. Once the user clicks a photo, a details window will appear showing title, author and link to flickr. The search request is working and the photos are displaying as they should, my problem is in the "show details" part. Problems:

  1. The displayed title, author and link are not the same as the original photo in flickr.
  2. Once the user search something, the first photo clicked will update the vars title, author, link; but when the user clicks another photo in the same search page, the vars won't update as they should. I hope you guys can help me out :)

Codepen: http://codepen.io/julianb/pen/XdbLMM?editors=101 JSON: https://api.flickr.com/services/feeds/photos_public.gne?format=json

// julian@example.com (Julian) ==> Julian
function getAuthor(str) {
  var newStr = '';
  str = str.split('');

  for (var i = 0, j = str.length; i < j; i += 1 ) {
    if (str[i]!== '(' && Array.isArray(str)) {
      str[i] = str[i].replace(str[i], '');
      continue;
    }
    if (str[i] === '(') {
      str = str.join('');
      newStr = str;
    }
    newStr = newStr.split('');
    for (var x = 0, y = newStr.length; x < y; x += 1) {
      if (newStr[x] === '(' || newStr[x] === ')') {
        newStr[x] = newStr[x].replace(newStr[x], '');
      }
    }
    newStr = newStr.join('');
    return newStr;
  }
}

var title;
var author;
var description;
var link;
$('form').submit(function(event) {
  /* Act on the event */
  event.preventDefault();
  var url = 'https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
  var query = $('.search-container input').val();
  var flickrOptions = {
    tags: query,
    format: "json"
  }
  function displayPhotos(data) {
    var photoHTML = '<ul class="gallery-list">';
    $.each(data.items, function(index, photo) {
      photoHTML += '<li class="thumb-li">';
      photoHTML += '<a href="#">';
      photoHTML += '<img class ="thumb-img" src="' + photo.media.m + '"></a></li>';
      title = photo.title;
      author = getAuthor(photo.author);
      description = getDescription(photo.description);
      link = photo.link;
    });
    photoHTML += '</ul>';
    $('.gallery-section').html(photoHTML);
  }
  $.getJSON(url,flickrOptions,displayPhotos);
});

var $close;
var $details;
$('.gallery-section').on('click', '.thumb-li', function () {
  $details = $('<div id="details"></div>');

  var $titleDiv = $('<div class="details-title"></div>');
  var $titleH1 = $('<h1>' + title +'</h1>');
  $close = $('<i class="ion-close"></i>');

  var $thumbUl = $('<ul class="gallery-list details-list"></ul>');
  var $thumbLi = $('<li class="thumb-li"></li>');
  var $thumbA = $('<a href="#"></a>');
  var $thumbImg = $('<img class="thumb-img" src="' + $(this).find('img').attr('src') + '"></img>');

  var $infoDiv = $('<div class="info"></div>');
  var $authorDiv = $('<div class="author"></div>');
  var $authorIcon = $('<i class="ion-android-person"></i>');
  var $authorSpan = $('<span>' + author + '</span>');
  var $linkImg = $('<a href="' + link +'"></a>');
  var $linkIcon = $('<i class="ion-link"></i>');

  var $description = $('<p class="description">' + description + '</p>');

  //append title, img, infoDiv, description to $details
  $details.append($titleDiv);
  $details.append($thumbUl);
  $details.append($infoDiv);
  $details.append($description);

  //append h1 and close to $titleDive
  $titleDiv.append($titleH1);
  $titleDiv.append($close);

  //append (ul>)li>a>img to $thumbUl
  $thumbUl.append($thumbLi);
  $thumbLi.append($thumbA);
  $thumbA.append($thumbImg);

  //append authorDiv and linkImg to $infoDiv
  //append authorIcon and authorSpan to authorDiv. linkIcon to linkImg
  $infoDiv.append($authorDiv);
  $infoDiv.append($linkImg);
  $authorDiv.append($authorIcon);
  $authorDiv.append($authorSpan);
  $linkImg.append($linkIcon);

  $('.form-container').hide();
  $('.container').hide();
  $('body').append($details);
});

$('body').on('click','.ion-close',function () {
  $details.remove();
  $('.form-container').show();
  $('.container').show();
});