Good day.
I want to sort 2 arrays by one value - pubdate. Yesterday I was told how to sort 1 array in this way, for example, I did this:
$scope.items = data.articles.concat(data.posts); $scope.items.sort(function(a, b) { return b.pubdate - a.pubdate; }); Everything seems to be sorted as I need. But now there was a problem with the output of this array. I do not know how to get it right.
I have 2 types of publications - a small text and an article. It is necessary to display both that, and that, but with sorting by date (pubdate). Did this:
<div class="post-wrapper" ng-repeat="item in items | startFrom: startingItem() | limitTo: itemsPerPage | orderBy:'-pubdate'"> <p class="pubdate">{{ item.pubdate * 1000 | date:'MM/dd/yyyy hh:mma'}}</p> <p class="post-text">{{ item.text }}</p> <p class="post-text">{{ item.article }}</p> </div> But it does not work that way, I assumed, and I, in principle, know why. But, alas, I do not know how to do it right.
JSFiddle: https://jsfiddle.net/83jt342x/
var app = angular.module('app', []) .filter('startFrom', function() { return function(input, start) { start = +start; return input.slice(start); } }) .controller('paginationCtrl', function($scope, $http) { $http({ method: 'GET', url: 'https://api.myjson.com/bins/4iqg2' }).success(function(data) { $scope.items = data.articles.concat(data.posts); $scope.items.sort(function(a, b) { return b.pubdate - a.pubdate; }); }); $scope.currentPage = 0; $scope.itemsPerPage = 3; $scope.firstPage = function() { return $scope.currentPage == 0; } $scope.lastPage = function() { var lastPageNum = Math.ceil($scope.items.length / $scope.itemsPerPage - 1); return $scope.currentPage == lastPageNum; } $scope.numberOfPages = function() { return Math.ceil($scope.items.length / $scope.itemsPerPage); } $scope.startingItem = function() { return $scope.currentPage * $scope.itemsPerPage; } $scope.pageBack = function() { $scope.currentPage = $scope.currentPage - 1; } $scope.pageForward = function() { $scope.currentPage = $scope.currentPage + 1; } }); .wrapper { position: relative; width: 80%; margin: 0 auto; border-left: 1px solid #141516; border-right: 1px solid #141516; background: rgba(50, 50, 50, .3); overflow: hidden; } .post-wrapper { display: block; width: 400px; margin: 0 auto; text-align: center; } .pubdate { width: 200px; margin: 0 auto; padding: 0; font-size: 15px; font-family: monospace; text-align: center; border-bottom: 1px solid #323232; color: #323232; } .post-text { font-size: 25px; color: #141414; padding: 15px; background: rgba(50, 50, 50, 0.1); border-radius: 5px; } .pagination { margin: 0 auto; display: block; } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="wrapper" ng-app="app" ng-controller="paginationCtrl"> <div class="post-wrapper" ng-repeat="item in items | startFrom: startingItem() | limitTo: itemsPerPage | orderBy:'-pubdate'"> <p class="pubdate">{{ item.pubdate * 1000 | date:'MM/dd/yyyy hh:mma'}}</p> <p class="post-text">{{ item.text }}</p> <p class="post-text">{{ item.article }}</p> </div> <div class="pagination text-center"> <button class="pull-left btn btn-primary btn-sm" ng-disabled="firstPage()" ng-click="pageBack()">Prev page</button> <span class="page-num">{{currentPage+1}} of {{numberOfPages()}}</span> <button class="pull-right btn btn-primary btn-sm" ng-disabled="lastPage()" ng-click="pageForward()">Next page</button> </div> </div> JSON: https://api.myjson.com/bins/4iqg2
{ "articles":[ {"pubdate":1461495344,"article":"AText 1"}, {"pubdate":1461492824,"article":"AText 2"}, {"pubdate":1461482024,"article":"AText 3"}, {"pubdate":1461486944,"article":"AText 4"} ], "posts":[ {"pubdate":1461431721,"text":"Text1"}, {"pubdate":1461431781,"text":"Text2"}, {"pubdate":1461431901,"text":"Text3"}, {"pubdate":1461431961,"text":"Text4"}, {"pubdate":1461432021,"text":"Text5"} ] } PS The pagination code is not mine. If there are better options, offer.
UPD.
You should get this:
<div class="post-wrapper"> <p class="pubdate">pubdate</p> <p class="post-text">Text 1</p> </div> <div class="post-wrapper"> <p class="pubdate">pubdate</p> <p class="post-text">Text 2</p> </div> <div class="post-wrapper"> <p class="pubdate">pubdate</p> <p class="post-text">Text 3</p> </div> <div class="post-wrapper"> <p class="pubdate">pubdate</p> <p class="post-text">Text 4</p> </div> <div class="post-wrapper"> <p class="pubdate">pubdate</p> <p class="post-text">Text 5</p> </div> <div class="post-wrapper"> <p class="pubdate">pubdate</p> <p class="post-text">AText 1</p> </div> <div class="post-wrapper"> <p class="pubdate">pubdate</p> <p class="post-text">AText 2</p> </div> <div class="post-wrapper"> <p class="pubdate">pubdate</p> <p class="post-text">AText 3</p> </div> <div class="post-wrapper"> <p class="pubdate">pubdate</p> <p class="post-text">AText 4</p> </div> You might be confused by the post-text class. I specifically made one, but you can duplicate it in styles and call article-text. And apply it to the last 4 tags p. All 5 divs are displayed with a small text (array of posts, text), then all 4 divas with the article are output (array of articles, article). But you also need to get it all sorted by date. That is, the AText 1 article may first be, then Text 5 simple text, then Text 4 simple text again, and then another AText 2 article, etc., sorted by pubdate.
