Wie füge ich Buchungsdatum auf json instagram api

Question

hinzu

Ich habe Probleme, die richtige Struktur für das Hinzufügen des Datums in meinem Json Instagram Feed herauszufinden. Hier

ist ein Beispiel für die Geige http://jsfiddle.net/galnova/p74jy3sk/

Hier ist der Code mit dem Kommentar gesetzt Datumsteil, dass ich nicht zur Arbeit bekommen.

<script type="text/javascript"> 

$(function(){ 

var accessToken = '271323200.1677ed0.67c49d5002704bc09c3c77320ec138a2'; // use your own token 
var date = new Date(parseInt(data.data[i].created_time) * 1000); 

     m = date.getMonth(); 
     d = date.getDate(); 
     y = date.getFullYear(); 

     var month_names = new Array (); 
     month_names[month_names.length] = "Jan"; 
     month_names[month_names.length] = "Feb"; 
     month_names[month_names.length] = "Mar"; 
     month_names[month_names.length] = "Apr"; 
     month_names[month_names.length] = "May"; 
     month_names[month_names.length] = "Jun"; 
     month_names[month_names.length] = "Jul"; 
     month_names[month_names.length] = "Aug"; 
     month_names[month_names.length] = "Sep"; 
     month_names[month_names.length] = "Oct"; 
     month_names[month_names.length] = "Nov"; 
     month_names[month_names.length] = "Dec"; 

    $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) { 
    $.each(insta.data,function (photos,src) { 
     if (photos === 200) { return false; } 
     // template 
     $(
     '<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 grip_wrap">' + 
      '<div class="grip_hang_topp"></div>' + 
      '<div class="col-xs-12 grip">' + 
      '<a class="fancybox zero" rel="gallery1" href="' + this.images.standard_resolution.url + '">' + 
       '<img src="' + this.images.standard_resolution.url + '" />' + 
      '</a>' + 
      '<div class="description">' + this.user.username + '</div>' + 
     '<span class="right col-xs-12 col-md-6 col-lg-12 heart-wrap floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' likes'+'</span>' + 
     '<span class="left col-xs-12 col-md-6 col-lg-12 comment-wrap floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' comments'+'</span>' + 
(date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear() + 
      '</div>' + 
      '<div class="grip_hang_bott"></div>' + 
     '</div>' 
    ).appendTo('#instafeed'); 
    }); 
    }); 
}); 
</script> 

Mein JavaScript-Wissen ist begrenzt. Ich habe online nach Lösungen gesucht und mit diesem json-Format keine gefunden. Jede Hilfe ist willkommen.

Answer 1

Sie können versuchen, moment.js zu analysiertem Datum zu verwenden.

analysiert Wert zuerst:

var parsedDate = new Date(1000*this.created_time);

Dann Format moment.js

moment(parsedDate).format('MM/DD/YYYY')

$(function(){ 
 

 
    
 
\t 
 
\t // tabbed menus 
 
\t 
 
\t //$('.menu .item').tab(); 
 
\t 
 
\t // first script to pull posts 
 
\t 
 
    var accessToken = '271323200.1677ed0.67c49d5002704bc09c3c77320ec138a2'; // use your own token 
 
    
 
    $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) { 
 
    
 
    $.each(insta.data,function (photos,src) { 
 
    var parsedDate = new Date(1000*this.created_time); 
 
     if (photos === 100) { return false; } 
 
\t \t // template 
 
     $(
 
     '<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 grip_wrap">' + 
 
      '<div class="grip_hang_topp"></div>' + 
 
      '<div class="col-xs-12 grip">' + 
 
      '<a class="fancybox zero" rel="gallery1" href="' + this.images.standard_resolution.url + '">' + 
 
       '<img src="' + this.images.thumbnail.url + '" />' + 
 
      '</a>' + 
 
      '<div class="description">' + this.user.username + '</div>' + 
 
\t  '<span class="right floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' 0 likes'+'</span>' + 
 
\t  '<span class="left floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' comments'+'</span> '+ moment(parsedDate).format('MM/DD/YYYY') + 
 
      '</div>' + 
 
      '<div class="grip_hang_bott"></div>' + 
 
     '</div>' 
 
    ).appendTo('#instafeed'); 
 
    }); 
 
    }); 
 
\t 
 
// script to for search 
 
//var accessToken = ''; // use your own token \t 
 
\t /* 
 
$('.ui.search') 
 
    .search({ 
 
    type   : 'category', 
 
    minCharacters : 200, 
 
    apiSettings : { 
 
     onResponse: function(githubResponse) { 
 
     var 
 
      response = { 
 
      results : {} 
 
      } 
 
     ; 
 
     // translate GitHb API response to work with search 
 
     $.each(githubResponse.items, function(index, item) { 
 
      var 
 
      language = item.language || 'Unknown', 
 
      maxResults = 200 
 
      ; 
 
      if(index >= maxResults) { 
 
      return false; 
 
      } 
 
      // create new language category 
 
      if(response.results[language] === undefined) { 
 
      response.results[language] = { 
 
       name : language, 
 
       results : [] 
 
      }; 
 
      } 
 
      // add result to category 
 
      response.results[language].results.push({ 
 
      title  : item.name, 
 
      description : item.description, 
 
      url   : item.html_url 
 
      }); 
 
     }); 
 
     return response; 
 
     }, 
 
     url: '//api.github.com/search/repositories?q={query}' 
 
    } 
 
    }) 
 
; 
 
*/ 
 
});

.ui.card .meta, .ui.cards > .card .meta { display: none; } 
 

 
.ui.card > .content > .header+.description, .ui.card > .content>.meta + .description, .ui.cards > .card > .content > .header + .description, .ui.cards > .card > .content > .meta + .description { margin-top: 0; } 
 

 
.ui.card > .extra, .ui.cards > .card > .extra { font-size: 10px; } 
 

 
i { margin-right: 3px; } 
 
.second { margin-left: 10px; } 
 
.floated { font-size: 11px; } 
 

 
@media only screen and (max-width: 480px) { 
 
    .ui.card > .content > .header:not(.ui), .ui.cards>.card>.content>.header:not(.ui) { 
 
    font-weight: normal; 
 
    font-size: 1em; 
 
    } 
 
    
 
    .ui.card > .content, .ui.cards > .card > .content { padding: .5em; } 
 
} 
 

 
/*-- --*/ 
 
.col-lg-1, 
 
.col-lg-10, 
 
.col-lg-11, 
 
.col-lg-12, 
 
.col-lg-2, 
 
.col-lg-3, 
 
.col-lg-4, 
 
.col-lg-5, 
 
.col-lg-6, 
 
.col-lg-7, 
 
.col-lg-8, 
 
.col-lg-9, 
 
.col-md-1, 
 
.col-md-10, 
 
.col-md-11, 
 
.col-md-12, 
 
.col-md-2, 
 
.col-md-3, 
 
.col-md-4, 
 
.col-md-5, 
 
.col-md-6, 
 
.col-md-7, 
 
.col-md-8, 
 
.col-md-9, 
 
.col-sm-1, 
 
.col-sm-10, 
 
.col-sm-11, 
 
.col-sm-12, 
 
.col-sm-2, 
 
.col-sm-3, 
 
.col-sm-4, 
 
.col-sm-5, 
 
.col-sm-6, 
 
.col-sm-7, 
 
.col-sm-8, 
 
.col-sm-9, 
 
.col-xs-1, 
 
.col-xs-10, 
 
.col-xs-11, 
 
.col-xs-12, 
 
.col-xs-2, 
 
.col-xs-3, 
 
.col-xs-4, 
 
.col-xs-5, 
 
.col-xs-6, 
 
.col-xs-7, 
 
.col-xs-8, 
 
.col-xs-9 { 
 
    padding: 8px; 
 
} 
 

 
h1 { 
 
    font-size: 28px; 
 
    margin-bottom: 10px; 
 
    padding: 8px; 
 
} 
 

 
h2 { 
 
    /* border-top: dotted 2px blue; */ 
 
    font-size: 24px; 
 
    padding-top: 8px; 
 
    margin-bottom: 4px; 
 
    margin-top: 8px; 
 
} 
 

 
.tupper { 
 
    /* border-bottom: solid 2px blue; */ 
 
    padding: 0; 
 
    padding-bottom: 8px; 
 
    margin: 0; 
 
} 
 

 
.main_wrap { 
 
    padding-bottom: 0; 
 
    border-bottom: solid 2px blue; 
 
    margin-bottom: 10px; 
 
} 
 

 
.grip_wrap:after { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: 1; 
 
    display: block; 
 
    width: 50px; 
 
    height: 5px; 
 
    background: blue; 
 
    top: 50%; 
 
    right: 0; 
 
} 
 

 
.grip_wrap:before { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: 1; 
 
    display: block; 
 
    width: 50px; 
 
    height: 5px; 
 
    background: blue; 
 
    top: 50%; 
 
    left: 0; 
 
} 
 

 

 
/* .grip_wrap:first-child:before { display: none; } 
 
.grip_wrap:last-child:after { display: none; } */ 
 

 

 
/* .grip_wrap:nth-child(4n+4):after { display: none; } */ 
 

 

 
/* .grip_wrap:nth-child(5):before, 
 
.grip_wrap:nth-child(9):before, 
 
.grip_wrap:nth-child(13):before 
 
{ display: none; } */ 
 

 

 
/* .grip_wrap:before > .grip:hover, .grip_wrap:after > .grip:hover { } */ 
 

 
.grip { 
 
    /* opacity: .5; */ 
 
    position: relative; 
 
    z-index: 2; 
 
    min-width: 150px; 
 
    background: #fff; 
 
    padding: 10px; 
 
    border: solid 2px blue; 
 
    border-radius: 10px; 
 
    /* overflow: hidden; */ 
 
    -webkit-box-shadow: 0px 0px 18px -5px rgba(0, 0, 0, 1); 
 
    -moz-box-shadow: 0px 0px 18px -5px rgba(0, 0, 0, 1); 
 
    box-shadow: 0px 0px 18px -5px rgba(0, 0, 0, 1); 
 
} 
 

 
.grip:hover { 
 
    border: solid 2px green; 
 
    cursor: pointer; 
 
} 
 

 
.grip img { 
 
    /* opacity: 0; */ 
 
    display: block; 
 
    width: 124px; 
 
    height: 124px; 
 
    border: solid 1px #000; 
 
    margin: 0 auto; 
 
} 
 

 
.grip a { 
 
    position: relative; 
 
    display: block; 
 
    width: 124px; 
 
    height: 124px; 
 
    margin: auto; 
 
} 
 

 
.grip .icent { 
 
    position: absolute; 
 
    display: block; 
 
    width: 124px; 
 
    height: 124px; 
 
    left: 50%; 
 
} 
 

 
.grip div { 
 
    padding: 5px; 
 
    padding-top: 3px; 
 
    margin-top: 8px; 
 
    width: 100%; 
 
    max-height: 28px; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    background: #cccccc; 
 
} 
 

 
.grip_hang_topp { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: 1; 
 
    height: 50px; 
 
    width: 5px; 
 
    background: blue; 
 
    left: 50%; 
 
    top: 0; 
 
} 
 

 
.grip_hang_bott { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: 1; 
 
    height: 50px; 
 
    width: 5px; 
 
    background: blue; 
 
    left: 50%; 
 
    bottom: 0; 
 
} 
 

 
.panel-body { 
 
    padding: 0; 
 
} 
 

 
.panel { 
 
    border-top: solid 2px blue; 
 
    border-bottom: solid 2px blue; 
 
} 
 

 
.panel-default >.panel-heading { 
 
    background: #ead554; 
 
    border: none; 
 
} 
 

 
.panel-heading a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-decoration: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<!-- <div class="ui bottom attached tab active" data-tab="first">--> 
 
    <div class="ui container"> 
 
    <d**strong text**iv id="instafeed" class="ui three column doubling centered grid container"></div> 
 
    </div> 
 
<!--</div> -->