JavaScript simplify for loop

Question

I built the following for Loop and wanted to ask if there is a way to simplify it:

//data contains an array
var i = 0;
if(data.length >= 1) {
    i = 1;
}
for (i; i <= data.length; i++) {
    $('#img-thumb-id' + i).attr('src', data[i-1]);
}

You can use $.each. And always start loop index from zero. — Adam Azad
– Adam Azad, Commented Jun 19, 2017 at 11:15
Do i understand right that you want it to be displayed once if data.length == 0? It doesn't appear to work in that case .. — Adder
– Adder, Commented Jun 19, 2017 at 11:16
@Adder i think that was an attempt to also check if data is empty — user2560539
– user2560539, Commented Jun 19, 2017 at 11:22

Adam Azad · Accepted Answer · 2017-06-19 11:29:57Z

3

I see that jQuery is used here, so you can use $.each

$.each(data, function(i, item){

   var iteration = +i+1;
   $('#img-thumb-id' + iteration).attr('src', item);

});

if you want to use vanilla JavaScript (no jQuery at all)

for (var i; i < data.length; i++) {
   var iteration = +i+1;
   document.getElementById('img-thumb-id'+iteration).src = data[i];
}

Or you can use:

for (var i in data) {
   document.getElementById('img-thumb-id'+(+i+1)).src = data[i];
}

edited Jun 19, 2017 at 11:29

answered Jun 19, 2017 at 11:18

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

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

1 Comment

NewToJS Over a year ago

If you want to offer a vanilla solution might I suggest you replace $('#img-thumb-id' + iteration) with document.getElementById('img-thumb-id'+iteration) I know the OP is using a jQuery selector but for future visitors it could be misleading or confusing as they will be expecting vanilla only.

sjahan · Accepted Answer · 2017-06-19 11:17:47Z

1

if(typeof data!=="undefined" && data && data.length>0) {
    for (var i=0; i < data.length; i++) {
        $('#img-thumb-id' + (i+1)).attr('src', data[i]);
    }
}

edited Jun 19, 2017 at 11:17

user2560539

answered Jun 19, 2017 at 11:16

sjahan

5,9804 gold badges24 silver badges46 bronze badges

11 Comments

Jonas Wilms Over a year ago

if(data && data.length) is equal to your condition

user2560539 Over a year ago

@Jonasw please check this example, it is not equal jsfiddle.net/ftr46syd/1

user2560539 Over a year ago

@Jonasw if(typeof data!=="undefined" && data && data.length) and typeof data!=="undefined" && data && data.length>0 perform better.

user2560539 Over a year ago

@Jonasw yes it perform better check the fiddle, do not define data and check the output, do the same for data being null,"",[],{} you will see some differences, to sum up this is more fail safe typeof data!=="undefined" && data && data.length i think if you really had the time to check the fiddle you would agree on that. Best regards.

user2560539 Over a year ago

@Jonasw and in addition in case you would like to mimic PHP's empty function what would you think of something like this jsfiddle.net/ftr46syd/2 ?

|

Jack F. · Accepted Answer · 2017-06-19 11:22:56Z

1

The loop is fine, but I don't see why you don't just do:

if(data !== null){
    for (var i = 0; i < data.length; i++) {
                $('#img-thumb-id' + (i + 1)).attr('src', data[i]);
            }
}

You don't need to do the first block of code in your question. It is more clear to people reading your code if you just do a standard for-loop starting from 0 and going up to the object.length.

answered Jun 19, 2017 at 11:22

Jack F.

1541 gold badge1 silver badge10 bronze badges

Comments

Dhananjaya Kuppu · Accepted Answer · 2017-06-19 11:34:47Z

1

You may also try this :

data.forEach(function(item, index){
   $('#img-thumb-id' + (index+1)).attr('src', item);
});

edited Jun 19, 2017 at 11:34

answered Jun 19, 2017 at 11:25

Dhananjaya Kuppu

1,3329 silver badges10 bronze badges

2 Comments

charlietfl Over a year ago

be careful with '#img-thumb-id' + index+1 ...won't produce what you expect

Dhananjaya Kuppu Over a year ago

Thank you @charlietfl placed index+1 inside parenthesis

Krazy_Tech · Accepted Answer · 2017-06-19 11:29:31Z

-1

Use simple foreach loop in JavaScript

//for eg. data array may be
var data = [1,2,3,4];
data.forEach(function(item, index){
$('#img-thumb-id' + (index+1)).attr('src', item);
});

edited Jun 19, 2017 at 11:29

answered Jun 19, 2017 at 11:21

Krazy_Tech

3263 silver badges11 bronze badges

3 Comments

Jonas Wilms Over a year ago

iteration is undefined.

Krazy_Tech Over a year ago

Thanks, for the undefined the index is used

Jonas Wilms Over a year ago

@downvoter please remove your downvote, tue answer is now valid

Collectives™ on Stack Overflow

JavaScript simplify for loop

5 Answers 5

1 Comment

11 Comments

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

11 Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related