Incremental and Decremental of javascript array

Question

I'm trying to create simple image modal using angular material. next() supposed to be view next image from the array and prev() view previous image.

Problem next and prev function not working as expected. If click next() index only increase +1 then stopped. If I click prev() index become -1

app.ts

  const imageArray = [
      {
        imageData: [
          'https://via.placeholder.com/50',
          'https://via.placeholder.com/60'
        ],
      },
      {
        imageData: [
          'https://via.placeholder.com/100'
        ],
      },
      {
        imageData: [
          'https://via.placeholder.com/150'
        ],
     }
  ];

  next() {
    this.currentImage = this.imageCollection[this.imageIndex + 1];
  }

  prev() {
    this.currentImage = this.imageCollection[this.imageIndex - 1];
  }

  processImage() {
    const rawData = this.imageArray;
    this.imageCollection = rawData.flatMap((el: any) => el.imageData);
    this.imageIndex = this.imageCollection.findIndex((x) => x === this.data.selectedImage);
    this.currentImage = this.imageCollection[this.imageIndex];
  }

app.html

<img [src]="currentImage"
     alt="customer document" />

<div (click)="next()">next</div>
<div (click)="prev()">previous</div>

oemera · Accepted Answer · 2021-03-09 16:49:33Z

1

You are not setting the this.imageIndex after you click. Try this:

  next() {
    // if is last image, then go to first image
    if(this.imageIndex === this.imageCollection.length - 1) this.imageIndex = 0;
    else this.imageIndex++;

    this.currentImage = this.imageCollection[this.imageIndex];
  }

  prev() {
    // if is first image, then go to last image
    if(this.imageIndex === 0) this.imageIndex = this.imageCollection.length - 1;
    else this.imageIndex--;

    this.currentImage = this.imageCollection[this.imageIndex];
  }

answered Mar 9, 2021 at 16:49

oemera

3,4933 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Johnny Over a year ago

When I clicked next() second time, index goes 1 to 3. It's skipping index 2

user400654 Over a year ago

@Johnny i suspect that's unrelated to the code solution provided here

Lakshya Thakur · Accepted Answer · 2021-03-09 17:01:59Z

1

The problem is that you're not actually incrementing/decrementing this.imageIndex but merely using its value which initially as per your question was 0.

Change it like so :-

  next() {
    this.currentImage = this.imageCollection[++this.imageIndex];
  }

  prev() {
    this.currentImage = this.imageCollection[--this.imageIndex];
  }

Do add the checks when this.imageIndex goes out of bounds.

edited Mar 9, 2021 at 17:01

answered Mar 9, 2021 at 16:44

Lakshya Thakur

8,3141 gold badge15 silver badges43 bronze badges

1 Comment

Johnny Over a year ago

When I clicked next() second time, index goes 1 to 3. It's skipping index 2

Collectives™ on Stack Overflow

Incremental and Decremental of javascript array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related