Navigate JSON Object - Prior Action

I am looking for a solution related to the following question/answer:

How can I cycle through JSON objects one by one in AngularJS on click

I need help with a function that displays the previous item from a JSON object. When the first item is selected, clicking should display the last item. I attempted to modify the code like this:

$scope.current = 0;
$scope.Back = function() {
    $scope.current = ($scope.current - 1) % $scope.data.length;
};

However, when the first item is selected and I click on it, nothing happens. How should I modify this function to include a 'back-function'?

Answer №1

Ensure that your $scope.current value is not equal to 0. If it is, then set your current value to data.length - 1.

$scope.current = ($scope.current == 0)? $scope.data.length-1 : ($scope.current - 1) % $scope.data.length;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Is there a way to call a function with specific parameters when the value of a select element changes in Angular? <div class="col-sm-6 col-md-4"> <label class="mobileNumberLabel " for="mobilrNumber">Select Service</label> <div cla ...

Tips for implementing FontAwesome in Nuxt3

I'm facing some issues trying to implement FontAwesome in my NuxtJS project, and for some unknown reasons, it's not working as expected. Let's take a look at my package.json: { "private": true, "scripts": { " ...

Error: karma cannot locate the templateUrl for Angular component

I'm encountering some issues while running tests on angular directives with karma. The problem arises when the directive comes from a templateUrl and is not being translated properly. Here's my karma.conf.js configuration: 'use strict&apos ...

ERROR: JSON parsing failed due to an unexpected token "<", indicating an issue with the syntax and structure of the input data

Currently, I am following a tutorial on Scrimba to learn about React and React Router 6. Unfortunately, I have encountered an error with the data provided in the tutorial. The error message reads as follows: 67:1 Uncaught (in promise) SyntaxError: Unexpect ...

Using v-model to dynamically update the router based on certain conditions

Check out this demo showcasing a navigation menu with nested items. Clicking "more" reveals the expanded list, which can be set to always open using v-model="item.model" with model = true. My goal is to have the submenu stay open only when the user is on ...

HttpRequestInterceptor is repeatedly showing the same error multiple times

Within my AngularJS app, I implemented an HttpRequestInterceptor to show a notification using toastr whenever a request fails. angular.module('spwApp.factories') .factory('httpRequestInterceptor', ['$q', '$injector&a ...

Getting hands-on with Express.js and gaining a foundational understanding of Angular

Thank you for taking the time to read my inquiry. As a developer experienced in PHP, particularly with Laravel, and possessing basic knowledge of AngularJS concepts such as routing, directives, and resource, I have been utilizing Laravel on the backend an ...

DataDog Grok Parsing: Uncovering Fields within Deeply Nested JSON structures

Can I extract nested JSON fields from a log? Here's an example I've been working on: thread-191555 app.main - [cid: 2cacd6f9-546d-41ew-a7ce-d5d41b39eb8f, uid: e6ffc3b0-2f39-44f7-85b6-1abf5f9ad970] Request: protocol=[HTTP/1.0] method=[POST] path ...

JavaScript Filtering JSON Data Based on Date Range

I am attempting to filter a basic JSON file based on a specified date range, with both a start date and an end date. Below is the function I have created for this task: var startDate = new Date("2013-3-25"); var endDate = new Date("2017-3-2 ...

Enhance user experience with PrimeFaces by implementing an Ajax update feature through

I'm interested in using PrimeFaces to ajax update a JavaScript script. <script type="text/javascript"> <!-- function lineChartExtender(){ this.cfg.highlighter = { showTooltip: true, tooltipAxes: &apos ...

Utilize the hash key for creating a CSV-compatible format

I am attempting to create a CSV-ready output using jq and would like to utilize the nested hash key along the way. In this scenario, http and https should be reused to generate a format ready for CSV ([]...). Original { "google.com":{ ...

What is the method for indicating the data type in an XDR request?

Currently, I am successfully using XDR for cross domain resource sharing in IE. However, I am facing an issue with specifying the return dataType to receive JSON as responseText. Below is the snippet of my code: if (window.XDomainRequest && $.browser.m ...

What is the best method for converting IDs into objects within ng-options in Angular?

Is there a way to dynamically use an array of IDs as the source of my ng-option directive inside of select? Instead of creating an array of objects with corresponding IDs, I am wondering if there is a method to set a function as the source of ng-option. ...

The Vue router requires a page reload to see changes and does not have access to the this

When navigating through router-link, the App.vue page opens initially, but the URL changes immediately without displaying the content. Reloading the page is necessary to view it. If you navigate programmatically, you may encounter an error stating 'Ca ...

Express-hbs: Dynamic Helper Function with Additional Features

I am currently utilizing express-hbs and Async Helpers in my project. However, I am facing an issue with passing options to the helper as async helpers do not seem to support this feature (or maybe I am unaware of how to do it correctly). In the code snipp ...

Could you clarify the significance of the brackets in this TypeScript Lambda Expression?

I'm currently delving into an Angular book, but I'm struggling to locate any definitive documentation regarding the usage of square brackets in a lambda expression like [hours, rate]) => this.total = hours * rate. While I grasp that these para ...

Utilizing material-ui textfield involves a delay when the input is being focused

Is there a way to trigger inputRef.current.focus() without relying on setTimeout? It seems like the focus is not working as expected in React or MaterialUI. For a demonstration, visit: https://codesandbox.io/s/goofy-gareth-lkmq3?file=/src/App.js export de ...

Is there a problem with `window.google` being undefined in a React

Every time I call window and use console log, a google prop appears as shown below: https://i.sstatic.net/dSMs8.png But then when I attempt to call window.google, it returns undefined. Am I overlooking something here? ...

Unable to input any text into the textfield

After implementing redux-form-material-ui for my form, I am facing an issue where I cannot type anything in the textfield. Despite having two textfields and an Autocomplete option, only the Autocomplete box seems to be functioning properly while the textfi ...

JavaScript shortening a string while joining it

I'm facing a challenge with string truncation in my laravel and JS(jquery) app. Initially, I suspected it was an issue with the backend (as indicated in my question here: Laravel Truncating Strings). However, after thorough debugging, I discovered tha ...