$ getJSON работает на jsfiddle, но не удаленно

Question

Я по-прежнему новичок в понимании всего, что я пытаюсь сделать, поэтому мне нужна какая-то помощь в том, что нарушает мой код. Короче говоря, я хочу взять результаты json, содержащие информацию о фотографии, и настроить определенные параметры, которые будут содержаться в vars, которые мне нужно будет использовать.

Этот код работает только в jsfiddle. Он отображает имя пользователя владельца Flickr.

$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoId + '&format=json&jsoncallback=?', 
    function(data) { 
     var photoOwner = $.parseJSON(JSON.stringify(data.photo.owner.username)); 
     $('#photoInfo').html(photoOwner); 
}); 

Когда я ставлю этот код обратно в остальной части моего файла JS, он выдает ошибку ...

Uncaught TypeError: Cannot read property 'owner' of undefined 

Ниже представлена ​​упрощенная версия моего файла JS (минус apiKey и PHOTOID вары).

(function() { 
    var s = document.createElement('script'); 
    s.setAttribute('src', 'http://jquery.com/src/jquery-latest.js'); 
    s.onload = function() { 
jQuery.noConflict(); 
(function ($) { 

    $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoId + '&format=json&jsoncallback=?', 
     function(data) { 
      var photoOwner = $.parseJSON(JSON.stringify(data.photo.owner.username)); 
     $('#photoInfo').html(photoOwner); 
    }); 

}(jQuery)); 
}; 
document.getElementsByTagName('body')[0].appendChild(s); 
}()); 

Так что я знаю, что код работает ... Я просто не знаю, почему она перестает работать, когда я его в свой файл JS. Любая помощь, советы, объяснения или лучший способ сделать это будут высоко оценены.

Answer 1

Я хотел бы попробовать что-то вроде этого ...

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script> 
    var apiKey = <insert api key>, 
     photoId = <insert photo id>; 

    jQuery(function($) { 
     // do all this in a document ready handler to ensure the 
     // #photoInfo element is present 

     $.getJSON('http://api.flickr.com/services/rest/?jsoncallback=?', { 
      method: 'flickr.photos.getInfo', 
      api_key: apiKey, 
      photo_id: photoId, 
      format: 'json' 
     }).done(function(data) { 
      var photoOwner = data.photo ? data.photo.owner.username : data.message; 
      $('#photoInfo').html(photoOwner); 
     }).fail(function(jqXHR, textStatus, errorThrown) { 
      alert('Could not connect to flickr API'); 
     }); 
    }); 
</script>