[英]Date Formatting Moment.js & Display Specific Data from Json File
首先,在$(value.bd.b).each(function(index, value) {
我试图过滤掉/仅显示仅属于开拓者的广播电台。它目前也显示所有对手电台。包括其他球队站。有谁知道如何只显示属于 blazers/pdx 的广播?不确定这里有什么意义。
其次,我正在使用 moment.js 更改日期格式,但目前无法正常工作。 显示在控制台上,但是当我提前 go 并将其实现到我的var filtered =.... currentDate
时,一切都中断了,浏览器上没有任何显示。 也许我把它加错了地方。
$(document).ready(function(){
$.getJSON('http://data.nba.com/data/v2015/json/mobile_teams/nba/2020/teams/trail_blazers_schedule_02.json', function(data) {
var currentDate = moment();
var newFormat = currentDate.format('dddd, MMM D');
console.log(newFormat); // <----- shows up on console correctly
var filtered = data.gscd.g.filter((entry) => Date.parse(entry.gdte) > currentDate); // <----- change to newFormat and it breaks.
filtered.sort((a, b) => Date.parse(b.gdte) - Date.parse(b.gdte));
var result = filtered.slice(0,3);
var homeOrAway = ($(data.gscd.g.ac).val() === 'Portland') ? 'Home' : 'Away' ;
var gameDetails = '';
$(result).each(function (index, value) {
gameDetails += '<div class="row date-section">';
gameDetails += '<div class="col"><h1>'+value.gdte+'</h1></div>';
gameDetails += '<div class="col text-end"><a href="#" class="button">WATCH</a></div>';
gameDetails += '</div>';
gameDetails += '<div class="row text-center" style="background-color: yellow;">';
gameDetails += '<div class="col col-details"><img src="assets/pdx-tb-logo.png"/><p>Portland Trail Blazers</p></div>';
gameDetails += '<div class="col col-details">';
gameDetails += '<p>'+value.stt+'</p>';
gameDetails += '<p>'+value.an+'</p>';
gameDetails += '<p>'+homeOrAway+'</p>';
$(value.bd.b).each(function(index, value){ //<-- Section that displays all stations.
// console.log(value.disp);
gameDetails += '<p>'+value.disp+'</p>';
});
gameDetails += '</div>';
gameDetails += '<div class="col col-details"><img src="assets/pdx-tb-logo.png"/><p>Portland Trail Blazers</p></div>';
gameDetails += '</div>';
});
$('.container').append(gameDetails);
});
});
您可以检查scope
是home
还是away
具体取决于此仅显示该值。 此外,使用moment(value.gdte).format('dddd, MMM D')
以所需格式显示日期。
演示代码:
$.getJSON('http://data.nba.com/data/v2015/json/mobile_teams/nba/2020/teams/trail_blazers_schedule_02.json', function(data) { var currentDate = moment(); var newFormat = currentDate.format('dddd, MMM D'); console.log(newFormat); var filtered = data.gscd.g.filter((entry) => Date.parse(entry.gdte) > currentDate); filtered.sort((a, b) => Date.parse(b.gdte) - Date.parse(b.gdte)); var result = filtered.slice(0, 3); var homeOrAway = ($(data.gscd.g[0].ac).val() === 'Portland')? 'Home': 'Away'; var gameDetails = ''; $(result).each(function(index, value) { //format your date gameDetails += '<div class="row date-section">'; gameDetails += '<div class="col"><h1>' + moment(value.gdte).format('dddd, MMM D') + '</h1></div>'; gameDetails += '<div class="col text-end"><a href="#" class="button">WATCH</a></div>'; gameDetails += '</div>'; gameDetails += '<div class="row text-center" style="background-color: yellow;">'; gameDetails += '<div class="col col-details"><img src="assets/pdx-tb-logo.png"/><p>Portland Trail Blazers</p></div>'; gameDetails += '<div class="col col-details">'; gameDetails += '<p>' + value.stt + '</p>'; gameDetails += '<p>' + value.an + '</p>'; gameDetails += '<p>' + homeOrAway + '</p>'; $(value.bd.b).each(function(index, value) { //check if scope is same if yes only append that values if (value.scope == homeOrAway.toLowerCase()) { gameDetails += '<p>' + value.disp + '</p>'; } }); gameDetails += '</div>'; gameDetails += '<div class="col col-details"><img src="assets/pdx-tb-logo.png"/><p>Portland Trail Blazers</p></div>'; gameDetails += '</div>'; }); $('.container').append(gameDetails); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script> <div class="container"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.