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

时间:2021-01-30 06:49:31

标签: jquery json

首先,在 $(value.bd.b).each(function(index, value) { 上,我试图过滤/显示仅属于开拓者一部分的广播电台。它目前也显示所有对手站。包括其他球队站位。有谁知道如何只显示属于西装外套/pdx 的广播?不确定这里有什么意义。

其次,我正在使用 moment.js 来更改日期格式,但目前无法解决。显示在控制台上,但是当我继续将它实现到我的 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);

    });

});

1 个答案:

答案 0 :(得分:0)

您可以检查 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>