Currently, I am working on developing an app to display news updates from a JSON API. The issue I am facing is that loading all the data from the JSON and filtering it using ng-repeat is causing slow performance, as there is a large amount of data.
I would like to modify the code so that only one row is selected in the controller, making it easier to load into the detail page.
Additionally, I want to order the news in descending order. While I have used | orderby for this purpose, loading all the data at once is impacting the speed of the app. My goal is to implement a swipe-to-refresh feature that initially displays only 8 posts and loads more data when swiped, similar to how Twitter works.
Controller.php
.controller('MediaCtrl', function($scope, $http) {
$http.get('http://api.pemiluapi.org/rekam-jejak-media/api/rekam_jejak?apiKey=c6a0237499f3e4197546b5551a3a864f')
.then(function(res){
$scope.medias = res.data;
//alert(res.data);
});
})
.controller('MediaDetailCtrl', function($scope, $stateParams, $http) {
$http.get('http://api.pemiluapi.org/rekam-jejak-media/api/rekam_jejak?apiKey=c6a0237499f3e4197546b5551a3a864f')
.then(function(res){
$scope.medias = res.data;
$scope.mediaid = $stateParams.mediaId;
//alert(res.data);
});
})
Detail.html
<ion-content style="padding:30px;" class="item-remove-animate " ng-repeat="media in medias.data.results.rekam_jejak | filter: {id: mediaid}" type="item-text-wrap" href="#/tab/daerah/{{province.id}}">
Media.html (all news)
<ion-item class="item-remove-animate " ng-repeat="media in medias.data.results.rekam_jejak | orderBy:'id':true" type="item-text-wrap" href="#/tab/media-detail/{{media.id}}">
Thank you for your assistance :) Let's collaborate!