繁体   English   中英

日期格式化 Moment.js 并显示 Json 文件中的特定数据

[英]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);

    });

});

您可以检查scopehome还是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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM