foreach element in array of images

Question

var str = '01.jpg,02.jpg,03.jpg';
var arr = [str.split(',')];
var cnt = '';
arr.forEach(function(el){
		cnt += "<img class = 'imgall' src = 'imgt/" + el + "' alt='img'>";
	});
	console.log(cnt);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

What I need in console is:

<img class='imgall' src='imgt/01.jpg' alt='img'>
<img class='imgall' src='imgt/02.jpg' alt='img'>
<img class='imgall' src='imgt/03.jpg' alt='img'>

Any help?

1. This has nothing to do with jQuery, 2. just don't wrap the return value of .split() (which is already an array) in an array. — Andreas
– Andreas, Commented Jul 13, 2019 at 9:14

Nina Scholz · Accepted Answer · 2019-07-13 09:20:38Z

2

You need not to wrap the result of splitting in another array (because the result of splitting is an array) and you could map the items and join them later to a single string.

var str = '01.jpg,02.jpg,03.jpg';
    arr = str.split(',');
    cnt = arr
        .map(function (el) {
            return '<img class="imgall" src="imgt/' + el + '" alt="img">';
        })
        .join('\n'); // take later '', without newline

console.log(cnt);

ES6 with a template literal

var str = '01.jpg,02.jpg,03.jpg';
    result = str
        .split(',')
        .map(s => `<img class="imgall" src="imgt/${s}" alt="img">`)
        .join('\n'); // take later '', without newline

console.log(result);

edited Jul 13, 2019 at 9:20

answered Jul 13, 2019 at 9:16

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

hakki · Accepted Answer · 2019-07-13 09:16:18Z

2

//correct usage;
var arr = str.split(',');

var str = '01.jpg,02.jpg,03.jpg';
var arr = str.split(',');
var cnt = '';
arr.forEach(function(el){
		cnt += "<img class = 'imgall' src = 'imgt/" + el + "' alt='img'>";
	});
	console.log(cnt);

answered Jul 13, 2019 at 9:16

hakki

1

Comments

Ravi · Accepted Answer · 2019-07-13 09:18:17Z

1

var str = '01.jpg,02.jpg,03.jpg';
var arr = str.split(',');
var cnt = '';

for(var i=0;i<arr.length;i++)
{
		cnt += "<img class = 'imgall' src = 'imgt/" + arr[i] + "' alt='img'>";
}

console.log(cnt);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Jul 13, 2019 at 9:18

Ravi

1,35011 silver badges21 bronze badges

Comments

Nikita Ščigelský · Accepted Answer · 2019-07-13 09:22:07Z

1

If you need a collection of DOM elements in a array, just try out this code:

var str = '01.jpg,02.jpg,03.jpg';
var arr = str.split(',');

var values = arr.map(function(image) {
  var img =  document.createElement('img')
  img.src = "/imgt" + image;
  img.alt = "img";
  return img;
})

console.log(values)

answered Jul 13, 2019 at 9:22

Nikita Ščigelský

1221 silver badge3 bronze badges

Comments

A l w a y s S u n n y · Accepted Answer · 2019-07-13 09:40:15Z

1

Do with your own existing code, just remove the [] from str.split(','); because str.split(',') already creates an array so no need to wrap it with another extra array notation here. Though I just added an extra \n nothing else.

var str = '01.jpg,02.jpg,03.jpg';
var arr = str.split(',');//see the change here
var cnt = '';

arr.forEach(function(el) {
  cnt += "<img class = 'imgall' src = 'imgt/" + el + "' alt='img'>\n";
});
console.log(cnt);

edited Jul 13, 2019 at 9:40

answered Jul 13, 2019 at 9:18

A l w a y s S u n n y

38.8k9 gold badges68 silver badges120 bronze badges

Collectives™ on Stack Overflow

foreach element in array of images

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related