Navigating a javascript object (previous and next)

Question

I am using Vue3 together with Collect.js. I have an object records that can have n number of items.

On my website, I display these records - one by one. The current record is captured by a variable called current

Users can navigate through the records (previous or next):

<button @click="navigateRecords('previous')" type="button">
    Previous
</button>
<button @click="navigateRecords('next')" type="button">
    Next Record
</button>

I have a method called navigateRecords as per below code. Please note that I have to append a key to the current record, called completion.

const props = defineProps({
    records: {
        type: Object,
    },
})

const currentRecordIndex = ref(0);
const current = ref({...collect(props.records.first()), completion: ''});

const navigateRecords = (direction) => {
    //If user is clicking on "Next"
    if (direction === 'next') {
        //If we are at the end of the object, return to first record, else get the next.
        if (currentRecordIndex.value === collect(props.records).count() - 1) {
            currentRecordIndex.value = 0;
        } else {
            currentRecordIndex.value++;
        }
    } else {
        //If we are at the end of the object, return to first record, else get the previous.
        if (currentRecordIndex.value > 0) {
            currentRecordIndex.value--;
        }else{
            currentRecordIndex.value = collect(props.records).count() - 1;
        }
    }

    //Set the current record, to the one navigated to.
    let newValue = collect(props.records).slice(currentRecordIndex.value).first();
    current.value = {
        ...newValue,
        completion: newValue.completion || ''
    }

}

I find the above code very messy, and I was wondering if there is a more elegant way to do this - perhaps even without using collect.js. Either way, I am using Vue3's composition API .

I'm not familiar with Vue, so don't really understand the ref and collect constructs, but at the very least you can split this into two functions, navigateNext, and navigatePrevious (passing a string to indicate direction is overly verbose and prone to typos). Also, if you want just one value out of the collection, just use the index accessor (collect(props.records)[0]) rather than slice. — Dave Meehan
– Dave Meehan, Commented May 16, 2022 at 7:08
Thanks, Dave. Good points about splitting them into two distinct methods. I was also looking for ways to perhaps optimize the if if else usage... — oliverbj
– oliverbj, Commented May 16, 2022 at 12:39
The outer if is dealing with direction, so if you split into two functions, you won't need that level. That just leaves if ... else ... — Dave Meehan
– Dave Meehan, Commented May 16, 2022 at 17:15

Simon Forsberg · Accepted Answer · 2022-05-19 22:36:24Z

To simplify the logic, you can make direction into an offset instead and pass it the value 1 (for next) or -1 (for previous)

currentRecordIndex.value += offset;

And to handle the wrapping in case of out of bounds, you can use the modulo operator:

let length = collect(props.records).count();
currentRecordIndex.value = (currentRecordIndex.value + length) % length;

This allows you to get rid of the entire outer if-else construct.

I am not familiar with collect.js, nor do I know what kind of object props.records are, but if it's a simple array, I would recommend using the .length property of it instead.

Stack Exchange Network

Navigating a javascript object (previous and next)

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Navigating a javascript object (previous and next)

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions