JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="loading">Loading...</div>
<div id="result"></div>

CSS

.photo {
    float:left;
}

JavaScript

$(function() {
    
    $.ajax({
        url:'https://graph.facebook.com/kosuke.sagara/photos',
        dataType:'jsonp',
        data:{'access_token':'AAACEdEose0cBACoJvyfO6Sql5WeUiZBBHo1Q59vjHBNEpfV7ycY3AzFFYkotpOVdpDXwqtqDfjizbsGhxNsxUCergZAZAnNckbsj5J0ncWGpCyxyvzm'},    beforeSend:function(jqXHR, settings){
        //data送信前に実行する
        //リクエストヘッダの設定などが出来る
        //ex: jqXHR.setRequestHeader(name, value)
        $('#loading').show();
    }
    })
     .then(
         function(responce){
             $('#loading').hide();
             $('#result').empty();
             console.log(responce)
                 var html = '';
                 $.each(responce.data, function(i, photo){
                     console.log(i,photo);
                     
                     html += '<div class="photo"><a href="'+photo.link+'"><img src="'+photo.picture+'" alt="'+(photo.name?photo.name:'')+'" title="'+photo.updated_time+'"></a>';
                     html += '</div>';
                     
                 });
             
             $('#result').append(html);
         },
         function(){
         }
     );
});