Is there a way I can retrieve a set of data from a JSON file by simply clicking on the next or

Question

Is there a way I can retrieve a set of data from a JSON file by simply clicking on the next or

I am currently working on building a Hybrid mobile app using Angular and Ionic frameworks. Below is the sample data that I have obtained:

$scope.data = [{
        "PID": 108,
        "Name": "Demo",
        "TID": 20,
        "date": "2016/00/29"
     }, {
        "PID": 98,
        "Name": "Sports Demo1",
        "TID": 20,
        "date": "2016/06/02"
     }, {
        "PID": 98,
        "Name": "Sports Demo2",
        "TID": 20,
        "date": "2016/06/02"
     }, {
        "PID": 98,
        "Name": "Sports Demo3",
        "TID": 20,
        "date": "2016/06/02"
     }, {
        "PID": 98,
        "Name": "Sports Demo4",
        "TID": 20,
        "date": "2016/06/02"
     }]

Code for the first page HTML :

<ion-content class="" padding="true">   
        <ul ng-repeat="dataSch in data">
            <li class="item" style="border-width: 0px;">
                <div class="item" style="border-width: 0px; padding : 1px;">{{dataSch.Name}}</div>  
                <div class="item" style="border-width: 0px; padding : 1px;">{{dataSch.date}}</div> 
            </li>  
        </ul> 
</ion-content>

Code for the second page HTML :

<ion-content class="" padding="true">  
        <div>Detail 1</div>  
        <div>Detail 2</div>  
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">  
    <button ng-click="next()">Next</button> 
    <button ng-click="previous()">Previous</button>  
</ion-footer-bar>

In the first page, by clicking on an "li" element based on "PID", I can navigate to the second page with all the details. However, on the second page, there are options in the footer to move to next or previous data from there itself. But how can I display the next or previous data on the second page?

For example, if I clicked on the second element on the first page and got the data Name as "Sports Demo1" on the second page, clicking on Next button should show "Sports Demo2" and clicking on Previous should show "Demo".

javascript angularjs json ionic-framework

Answer 1

Answer №1

HTML : 
<a ng-click="showDetails(only_selected_data);">View Details</a>
<div>
   <h4 >{{info.Name}}</h4>
   <h4 >{{info.Name1}}</h4>
   <h4 >{{info.Date}}</h4> 
</div>
<ion-footer-bar class="bar-assertive" >
   <button ng-disabled="disable_btn1" ng-click="previousElement();"> Previous </button>
   <button ng-disabled="disable_btn2" ng-click="nextElement();"> Next</button> 
</ion-footer-bar> 



JS
    $scope.showDetails = function(data){  
            var fullLength = $scope.DataArray.length - 1;  
            $scope.data = data; 
            var index= $scope.DataArray.indexOf(data); 
            $scope.index = index; 
            if(fullLength == $scope.index){ 
                $scope.disable_btn2 = true;
            }else if($scope.index == 0){ 
                $scope.disable_btn1 = true;
            }else{
                $scope.disable_btn1 = false;
                $scope.disable_btn2 = false;
            }
            var info = $scope.DataArray[$scope.index];
            $scope.info = info; 
        }

    $scope.showDetails1 = function(arrayindex){  
            var fullLength = $scope.DataArray.length - 1; 
            if(fullLength == arrayindex){ 
                $scope.disable_btn2 = true;
            }else if(arrayindex == 0){ 
                $scope.disable_btn1 = true;
            } 
            $scope.data = $scope.data; 
            var info = $scope.DataArray[arrayindex];  
            $scope.info = info;
        }

    $scope.previousElement = function(){ 
                $scope.showDetails1($scope.index - 1);
                $scope.index--; 
        }
        $scope.nextElement = function(){ 
                $scope.showDetails1($scope.index + 1);
                $scope.index++; 
        }

Answer 2

HTML : 
<a ng-click="showDetails(only_selected_data);">View Details</a>
<div>
   <h4 >{{info.Name}}</h4>
   <h4 >{{info.Name1}}</h4>
   <h4 >{{info.Date}}</h4> 
</div>
<ion-footer-bar class="bar-assertive" >
   <button ng-disabled="disable_btn1" ng-click="previousElement();"> Previous </button>
   <button ng-disabled="disable_btn2" ng-click="nextElement();"> Next</button> 
</ion-footer-bar> 



JS
    $scope.showDetails = function(data){  
            var fullLength = $scope.DataArray.length - 1;  
            $scope.data = data; 
            var index= $scope.DataArray.indexOf(data); 
            $scope.index = index; 
            if(fullLength == $scope.index){ 
                $scope.disable_btn2 = true;
            }else if($scope.index == 0){ 
                $scope.disable_btn1 = true;
            }else{
                $scope.disable_btn1 = false;
                $scope.disable_btn2 = false;
            }
            var info = $scope.DataArray[$scope.index];
            $scope.info = info; 
        }

    $scope.showDetails1 = function(arrayindex){  
            var fullLength = $scope.DataArray.length - 1; 
            if(fullLength == arrayindex){ 
                $scope.disable_btn2 = true;
            }else if(arrayindex == 0){ 
                $scope.disable_btn1 = true;
            } 
            $scope.data = $scope.data; 
            var info = $scope.DataArray[arrayindex];  
            $scope.info = info;
        }

    $scope.previousElement = function(){ 
                $scope.showDetails1($scope.index - 1);
                $scope.index--; 
        }
        $scope.nextElement = function(){ 
                $scope.showDetails1($scope.index + 1);
                $scope.index++; 
        }

Answer 3

Answer №2

When you reach the second page, make sure to use the next/previous function with the PID of the next/previous element in order to navigate properly:

<ion-footer-bar align-title="left" class="bar-assertive">  
    <button ng-click="next(97)">Next</button> 
    <button ng-click="previous(99)">Previous</button>  
</ion-footer-bar>

In these next/previous functions, remember to include the redirecting logic to take users to the new page.

PS: Instead of having separate next and previous functions, consider using just one function (goToPage(PID)).

Answer 4

When you reach the second page, make sure to use the next/previous function with the PID of the next/previous element in order to navigate properly:

<ion-footer-bar align-title="left" class="bar-assertive">  
    <button ng-click="next(97)">Next</button> 
    <button ng-click="previous(99)">Previous</button>  
</ion-footer-bar>

In these next/previous functions, remember to include the redirecting logic to take users to the new page.

PS: Instead of having separate next and previous functions, consider using just one function (goToPage(PID)).

Answer 5

Answer №3

To keep track of the current page, you can create an index property in the $scope object. Implementing next and prev functions will involve adjusting this index accordingly:

$scope.gotoPage = function(index) {
   $scope.index = index;
   ...
};
$scope.next = function() {
   $scope.gotoPage($scope.index+1);
};
$scope.prev = function() {
   $scope.gotoPage($scope.index-1);
};

If page1 and page2 share the same controller, the above code should suffice. However, if they use different controllers, you may need to employ a service for seamless functionality.

Answer 6

To keep track of the current page, you can create an index property in the $scope object. Implementing next and prev functions will involve adjusting this index accordingly:

$scope.gotoPage = function(index) {
   $scope.index = index;
   ...
};
$scope.next = function() {
   $scope.gotoPage($scope.index+1);
};
$scope.prev = function() {
   $scope.gotoPage($scope.index-1);
};

If page1 and page2 share the same controller, the above code should suffice. However, if they use different controllers, you may need to employ a service for seamless functionality.

Is there a way I can retrieve a set of data from a JSON file by simply clicking on the next or

Answer №1

Answer №2

Answer №3

Similar questions

Is there a glitch in jQuery that causes other items in the UI to disappear when deleting a single item from local storage, even though they

Having trouble getting Vue.js to cooperate with a brand new Laravel 5.8 setup?

An error occurred with the datepicker: Unable to connect to 'bsValue' as it is not recognized as a property of 'input'

What is the reason for the square brackets in my json data?

How can you modify the default empty table message in a datatable using DTOptions?

What is the best way to delete and add elements in a looped array using Javascript

Avoiding non-router links from remaining active while using routerLinkActive in Angular

Show flexibility in the grandchildren of a row layout

Converting a JSON file to a .tde file with the help of the Tableau Extract API in Java

Utilize jQuery to showcase elements in a dropdown menu

Creating an Ionic v4 alert box that redirects users to different pages

Creating nested routes in react-router is a useful technique for managing complex applications. By

Switch the background color alternately from red to green every second

Uncovering the characteristics of a GeoJSON data layer within Google Maps V3

Ways to verify if an item is enabled

``Is it possible to adjust the style of an HTML element based on the style of another element?

Using Axios to retrieve data from a MySQL database is a common practice in web development. By integrating Vue

What is the process for including the posting date in the JSON format while using the Instagram

What is the best way to simulate global variables that are declared in a separate file?

Having difficulties grasping the concept of how to communicate effectively with my MySQL database