How to pass a php array to an extracted alpine component and then check indexes?

[Ravenna]

I have an alpine component that I setup like:

<div class="course-wrapper" x-data="courseModule('{{$cm->id}}', '@json($sectionIDs)', '@json($completed)', '@json($inProgress)')">

All of the @JSON(VAR) are PHP arrays.

Then I have an alpine component called courseModule. In my component I am receiving the arrays like this:

export default function courseModule(cmID, sectionIDS, completed, inProgress) {

and then setup my data:

return {
      sectionIDS: JSON.parse(sectionIDS),
      completed: JSON.parse(completed),
      inProgress: JSON.parse(inProgress),

Now to where my issue happens:

I am trying to run a function that checks if there is a next index or if I am at the end. So I do the following:
let nextID = this.findNextSection(event.detail.csID, this.sectionIDS);

Then my function:

findNextSection(value, arr) {
            let index = arr.indexOf(value);
            let nextItem = false
            if(index >= 0 && index < arr.length - 1){
                nextItem = arr[index + 1]
            } 
            return nextItem;
        }

The issue is that it returns false even though I know there is a next item in the array.

If I console the array I get: Proxy(Array) {0: 1, 1: 2}
And the index var gets set to -1.

How can I get the next item in this sort of setup, or how can I refactor to handle this better?

thanks

[ekwoka]

You just need to do index < arr.length you added a -1 for no reason.

To meet it seems you could just rewrite this as

return arr[arr.indexOf(item)+1]

For the same effect. Is it possible to pass in an item that ISNT present? If not, then you never need to check for -1.

If it's just that it might be undefined then you can just do

return item && arr[arr.indexOf(item)+1]

And if the index if out of bounds, it returns undefined, which is already what your function does if the index is too high.

If you are looping over these in Alpine, you can get the index in the for loop and directly use that instead of doing this extra loop to get the index.

Or even use a stored iterator instead.

[Ravenna]

Thanks @ekwoka I really appreciate your response.

Good catch on not needing the -1. whats weird (and I probably didn't explain it well) was that the indexOf is returning the -1. Meaning it doesn't think it exists in the array. But it does. Console logging a few things:

Logging the array: Proxy(Array) {0: 1, 1: 2}
Logging the array length: 2
Logging the value: 1
Logging arr.indexOf(value): -1

Looking at the console log the value was a different color. I ran a typeof on it and it was a string. So the indexOf was failing because of the string and the -1.

thanks for the help

[ekwoka]

That would do it :)