如何按日期和时间播放最新的歌曲

时间:2014-12-24 18:27:09

标签: javascript angularjs angularjs-scope

我正在开发一个WebApp来播放我在工作时从twitter解析的音乐。目前我正在按照我从SoundCloud获得的歌曲ID存储歌曲。但我无法组织它播放最后播放的歌曲。我看着改变我的数据库中的密钥到日期,但是我必须检查这首歌是否已经存在,我认为这样做会更难。但我想弄清楚如何比较日期然后显示最近的歌曲。

我的数据如下:

"6655480" : {
      "Date" : "12/16/2014 2:58:39 am",
      "SongName" : "The Island (Steve Angello, An21 & Max Vangeli remix)",
      "Tweet" : "Pendulum/Steve Angello/An21/Vangeli - The Island playing on #BPM - @sxmElectro",
      "uri" : "https://api.soundcloud.com/tracks/6655480"
    }

我试过了:

$scope.Song.sort(function(a,b){
var c = new Date(a.Date);
var d = new Date(b.Date);
return c-d;
});

但它不起作用。任何帮助表示赞赏。

我得到$ scope.Song喜欢这个:

var ref = new Firebase("https://app.firebaseio.com/SC");
var sync = $firebase(ref);
$scope.Song = sync.$asArray();

更新:

所以我试图通过这样做来解决这个问题:

    $scope.log = [];
    angular.forEach(values, function(value, key) {
      value.sort(function(a,b){
            var c = new Date(a.Date);
            var d = new Date(b.Date);
            return c-d;
      }
    }, log);

但现在没有任何作用。我的语法有什么问题?这是正确的方法吗?

1 个答案:

答案 0 :(得分:0)

简单获取方式

如果你只需要在没有任何排序和过滤的情况下获取最新的歌曲,你可以简单地循环对象并选择最新的一个:



var songs = {
  "6655480": {
    "Date": "12/16/2014 2:58:39 am",
    "SongName": "The Island (Steve Angello, An21 & Max Vangeli remix)",
    "Tweet": "Pendulum/Steve Angello/An21/Vangeli - The Island playing on #BPM - @sxmElectro",
    "uri": "https://api.soundcloud.com/tracks/6655480"
  },
  "234": {
    "Date": "12/13/2014 2:58:39 am",
    "SongName": "Some Older Song",
    "Tweet": "Pendulum/Steve Angello/An21/Vangeli - The Island playing on #BPM - @sxmElectro",
    "uri": "https://api.soundcloud.com/tracks/6655480"
  },
  "123": {
    "Date": "12/19/2014 2:58:39 am",
    "SongName": "Some Newer Song",
    "Tweet": "Pendulum/Steve Angello/An21/Vangeli - The Island playing on #BPM - @sxmElectro",
    "uri": "https://api.soundcloud.com/tracks/6655480"
  },
  "253252": {
    "Date": "12/24/2014 2:58:39 am",
    "SongName": "The Newest Song",
    "Tweet": "Pendulum/Steve Angello/An21/Vangeli - The Island playing on #BPM - @sxmElectro",
    "uri": "https://api.soundcloud.com/tracks/6655480"
  }
}

var newestDate = new Date(0); // Jan 01 1970 
var newestSong;
for (var i in songs) {
  if (new Date(songs[i].Date) > newestDate) {
    newestDate = new Date(songs[i].Date)
    newestSong = songs[i];
  }
}

alert('The newest song is: ' + newestSong.SongName);





ng-repeat过滤方式

最简单的Angular方法是将ng-repeat与orderBy过滤器一起使用反向参数:

ng-repeat="song in Song | orderBy:'Date':true"

见这里:https://docs.angularjs.org/api/ng/filter/orderBy

注意:由于orderBy过滤器仅适用于数组(并且您无论如何都无法对对象进行排序),我不得不在其间添加自定义过滤器以将对象转换为数组(使用来自{ {3}}),所以我们有这个:

ng-repeat="song in Song | objToArrayCustomFilter | orderBy:'Date':true"

在此处查看它(添加了一个简单的切换按钮以翻转反向标志):



angular.module('test', [])
  .filter('object2Array', function() {
    return function(input) {
      var out = [];
      for (var i in input) {
        out.push(input[i]);
      }
      return out;
    }
  })
  .controller('Ctrl', function($scope) {
    $scope.reverse = true;
    $scope.songs = {
      "6655480": {
        "Date": "12/16/2014 2:58:39 am",
        "SongName": "The Island (Steve Angello, An21 & Max Vangeli remix)",
        "Tweet": "Pendulum/Steve Angello/An21/Vangeli - The Island playing on #BPM - @sxmElectro",
        "uri": "https://api.soundcloud.com/tracks/6655480"
      },
      "234": {
        "Date": "12/13/2014 2:58:39 am",
        "SongName": "Some Older Song",
        "Tweet": "Pendulum/Steve Angello/An21/Vangeli - The Island playing on #BPM - @sxmElectro",
        "uri": "https://api.soundcloud.com/tracks/6655480"
      },
      "123": {
        "Date": "12/19/2014 2:58:39 am",
        "SongName": "Some Newer Song",
        "Tweet": "Pendulum/Steve Angello/An21/Vangeli - The Island playing on #BPM - @sxmElectro",
        "uri": "https://api.soundcloud.com/tracks/6655480"
      },
      "253252": {
        "Date": "12/24/2014 2:58:39 am",
        "SongName": "The Newest Song",
        "Tweet": "Pendulum/Steve Angello/An21/Vangeli - The Island playing on #BPM - @sxmElectro",
        "uri": "https://api.soundcloud.com/tracks/6655480"
      }
    }

  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test" ng-controller="Ctrl">
  <p ng-repeat="song in songs | object2Array | orderBy:'Date':reverse"><strong>{{song.SongName}}</strong>: {{song.Date}}</p>
  <button ng-click="reverse = !reverse">Toggle order</button>
</div>
&#13;
&#13;
&#13;

关于Plunker:https://stackoverflow.com/a/19387871/965907