Find prev and next element from the json array of objects using current eventid using JS

1.7k Views Asked by At

Working: To display the data in current id from Json:

var _getEventById = function(eventId) {

        var __findEvent = function(event) {
            return event.id === eventId;
        };

        return _.find(data.meeting.events, __findEvent);
    };

I want to find the prev and next events.number using the current event ID. The below code doesn't work. it is written inside the model.

  var _getNextEvent = function(eventNumber) {
  var nextEventNumber = data.meeting.events.number += eventNumber ;
  var nextEvent = _.find(event, function(event) {
    return event.number === nextEventNumber;
  });

  return nextEvent.id;
};


var _getPrevEvent = function(eventNumber) {
  var prevEventNumber = data.meeting.events.number -= eventNumber ;

  var prevEvent = _.find(event, function(event) {
    return event.number === prevEventNumber;
  });

  return prevEvent.id;
};

What I tried is to pass the current events.id and find the events.number using Lodash and add one to find the next events number. with the Next event number to return its next events.id. (subtract to find the prev event id)

JSON: "meeting": {
      "id": "SING_74",
      "name": "Singapore Racing",
      "runDate": "2017-10-04",
      "meetingNumber": 12,
      "closeDate": "2017-10-04",
      "open": true,
      "venue": "Overseas",
      "currentRaceId": "SING_74_2",
      "code": "RACE",
      **"events": [**
        {
          **"id": "SING_74_1",**
          **"number": 1,**
          "open": false,
          "status": "Closed"
        },
        {
          "id": "SING_74_3",
          "number": 3,
          "open": true,
          "status": "Open"
        },
        {
          "id": "SING_74_4",
          "number": 4,
          "open": true,
          "status": "Open"
        },
        {
          "id": "SING_74_5",
          "number": 5,
          "open": true,
          "status": "Open"
        },

Achieve: what I am trying to achieve in angular is when user swipe on the Racing/events. it should identify ng-swipe-left and ng-swipe-right and update the data with the nexteventid or preveventid.

If you share any inputs or examples are much appreciated.

1

There are 1 best solutions below

3
On

Just create an array of ids

var event_ids = data.meeting.events.map(function(e){return e.id;}):

Find your current id index, calculate previous and next ones:

Math.min() is returning the lowest value, so if you are at the end of array, and swipe one more time it will return the last index of the array event_ids.length-1 since it will be lower than current_id_idx+1

current_id_idx -1 < 0 ? 0 : current_id_idx -1 makes sure that previous index of array will never be below zero

var current_id_idx = events_ids.indexOf(current_id);
var prev_idx = current_id_idx -1 < 0 ?  0 : current_id_idx -1;
var next_idx = Math.min(event_ids.length-1, current_id_idx +1);

and finally get next or prev event number

 var prev_number = data.meeting.events[prev_idx].number;
 var next_number = data.meeting.events[next_idx].number;