How to generate an array of Images using for loop in javascript?

Question

I'm trying to write an array of images, but I have a lot of images so I'm trying to use "for loop" to generate it.

my current code is :

var images = [
    "/images/image0000.png",
    "/images/image0005.png",
    "/images/image0010.png",
    "/images/image0015.png",
    "/images/image0020.png",
    "/images/image0025.png",
    "/images/image0030.png",
    "/images/image0040.png",
    "/images/image0045.png",
    "/images/image0050.png"
];

I have more images to add. so I would like to know how to use for loop to generate this.

The last image is /images/image3360.png

Thank you!

What do you mean by "generate"? what have you tried so far?

Ramesh Reddy
– Ramesh Reddy

2019-12-23 13:13:55 +00:00
Commented Dec 23, 2019 at 13:13 — Ramesh Reddy
– Ramesh Reddy, Commented Dec 23, 2019 at 13:13
Do these increment their "index" by 5 every time?

briosheje
– briosheje

2019-12-23 13:18:14 +00:00
Commented Dec 23, 2019 at 13:18 — briosheje
– briosheje, Commented Dec 23, 2019 at 13:18

Maciej B. Nowak · Accepted Answer · 2019-12-23 13:23:17Z

3

I think you don't want to generate the actual images, but rather fill an array with filenames. The simplest way would be:

const MAX = 3360;
const PREFIX = "/images/image";
const EXT = ".png";
const arr = [];
for (let i = 0; i <= MAX; i += 5) {
  arr.push(
    PREFIX + ("0000" + i).slice(-4) + EXT
  );
}

The slice thing comes from this answer.

edited Dec 23, 2019 at 13:23

answered Dec 23, 2019 at 13:21

Maciej B. Nowak

1,23510 silver badges19 bronze badges

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

4 Comments

Maciej B. Nowak Over a year ago

And why exactly is that?

briosheje Over a year ago

sorry, my fault. Didn't see that you were slicing the string. Reasonable solution indeed, assuming the "jump" criteria to 3360 is actually numeric.

Maciej B. Nowak Over a year ago

Indeed, but given the brevity of this question one must make some assumptions.

briosheje Over a year ago

I known, though I personally think there are not enough informations to properly answer to the question. In any case, you deserve a +1 for the brevity of your answer and for the clever usage of slice, definitely the most suitable solution for that scenario, in my opinion.

Mosè Raguzzini · Accepted Answer · 2019-12-23 13:24:10Z

1

const step = 5; // Steps
const imgNumber = 3360/step; // Image number
const images = []; // Array to hold images


for(i = 0; i<=imgNumber; i++) {
   const currNum = i*step; // Calculate suffix
   let str = "/images/image0000";
   str = str.substring(0, str.length - currNum.toString().length); // Compile number
   images.push(`${str}${currNum}.png`); // Store the image in the array
}
console.log(images);

answered Dec 23, 2019 at 13:24

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

Comments

Justin Feakes · Accepted Answer · 2019-12-23 13:28:11Z

0

You can do it like this:

let images = [];
for (let i = 0; i <= 3360; i += 5) {
    let imageString = "";
    let numberOfZeros = 4 - i.toString().length;

    for (let j = 0; j < numberOfZeros; j++) {
        imageString += "0";
    }
    images.push("/images/image" + imageString + i.toString() + ".png");
}

This essentially runs a for loop which increments by 5 each time, calculates the amount of leading zeros needed, then runs another for loop to add these leading zeros, and inserts a concatenation of this and the actual number inside the string which gets pushed to the array.

answered Dec 23, 2019 at 13:28

Justin Feakes

4001 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to generate an array of Images using for loop in javascript?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related