getting string from array in a shorter way

Question

The below code works but is there a way to get the result in a shorter way, i.e. directly from the map function, avoiding join line, or maybe avoiding arra declaration in a separate line?

let arra = $('.imga').toArray();

var arrb = arra.map(function(el) {
	return $(el).attr('data-id');
});

let str = arrb.join();

console.log(str);

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

<img class='imga' src='images/5b0fd05fa00e7.jpg' data-id=442 alt='img'>
<img class='imga' src='images/5b0fd09fa00e7.jpg' data-id=2 alt='img'>
<img class='imga' src='images/5b0fd07fa00e7.jpg' data-id=54 alt='img'>
<img class='imga' src='images/5b0fd03fa00e7.jpg' data-id=45 alt='img'>

You could use Array comprehension but it has been removed from the standard. More details here stackoverflow.com/questions/31353213/… — Kannappan Sirchabesan
– Kannappan Sirchabesan, Commented Jan 20, 2019 at 14:13

Roham Tehrani · Accepted Answer · 2019-01-20 14:19:24Z

3

Use chaining in your code if you want to reduce lines:

let str = $('.imga').toArray().map(function(el) {
    return $(el).attr('data-id');
}).join();

answered Jan 20, 2019 at 14:19

Roham Tehrani

3,0298 gold badges38 silver badges51 bronze badges

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

8 Comments

qadenza Over a year ago

@MathKimRobin, as I can see result is set here as a variable. Am I wrong?

MathKimRobin Over a year ago

You can fasterize it by using directly the dom, like this el.dataset.id

Rory McCrossan Over a year ago

Use data() to get data attributes in jQuery, not attr(). return $(el).data('id');

Roham Tehrani Over a year ago

@RoryMcCrossan I tested the code before sharing and it works. Are you sure?

Andy Over a year ago

@MathKimRobin maybe the OP is using it everywhere else in the code and it's familiar. Questions usually have a wealth of context behind them. Perhaps you could have offered a non-jquery solution in your answer.

|

Mario · Accepted Answer · 2019-01-20 14:36:21Z

2

Try the following solution in a single line of code

const string = [...document.querySelectorAll('.imga')].map(item => item.dataset.id).join(',');

console.log(string);

<img class='imga' src='images/5b0fd05fa00e7.jpg' data-id=442 alt='img'>
<img class='imga' src='images/5b0fd09fa00e7.jpg' data-id=2 alt='img'>
<img class='imga' src='images/5b0fd07fa00e7.jpg' data-id=54 alt='img'>
<img class='imga' src='images/5b0fd03fa00e7.jpg' data-id=45 alt='img'>

answered Jan 20, 2019 at 14:36

Mario

5,0044 gold badges42 silver badges65 bronze badges

Comments

Andy · Accepted Answer · 2019-01-20 14:57:36Z

2

Instead of casting to an array use jQuery's map to grab the data attribute, then get, and finally join. Because the code uses the callback parameters instead of this we can use an arrow function to stick it all on one line.

const str = $('.imga').map((i, v) => v.dataset.id).get().join();

console.log(str);

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

<img class='imga' src='images/5b0fd05fa00e7.jpg' data-id=442 alt='img'>
<img class='imga' src='images/5b0fd09fa00e7.jpg' data-id=2 alt='img'>
<img class='imga' src='images/5b0fd07fa00e7.jpg' data-id=54 alt='img'>
<img class='imga' src='images/5b0fd03fa00e7.jpg' data-id=45 alt='img'>

answered Jan 20, 2019 at 14:57

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Comments

Code Maniac · Accepted Answer · 2019-01-20 14:16:07Z

1

You can use reduce.

let arra = $('.imga').toArray();

var arrb = arra.reduce((op,el, index)=>{
   op += $(el).attr('data-id')
   if(index !== arra.length-1) op += ','
   return op;
},'');

console.log(arrb);

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

<img class='imga' src='images/5b0fd05fa00e7.jpg' data-id=442 alt='img'>
<img class='imga' src='images/5b0fd09fa00e7.jpg' data-id=2 alt='img'>
<img class='imga' src='images/5b0fd07fa00e7.jpg' data-id=54 alt='img'>
<img class='imga' src='images/5b0fd03fa00e7.jpg' data-id=45 alt='img'>

answered Jan 20, 2019 at 14:16

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

2 Comments

Code Maniac Over a year ago

@qadenza it saves you from using extra join, what do you mean by shorter is it about number of lines only?

qadenza Over a year ago

yes, but anyway your solution is creative and usefull. thanks a lot

MathKimRobin · Accepted Answer · 2019-01-20 14:15:43Z

-1

Maybe you should try to escape the join not necessary part. Like this

let arra = $('.imga').toArray(), 
    str = '' ;

var arrb = arra.forEach(function(el) {
    str += el.dataset.id;
});

console.log(str);

answered Jan 20, 2019 at 14:15

MathKimRobin

1,5905 gold badges27 silver badges60 bronze badges

3 Comments

qadenza Over a year ago

there is no comma here, example pls

MathKimRobin Over a year ago

No comma ? I don't understand your point. Maybe just my english is not good but I don't understand the point about comma. With the code I provided, you have the same result as yours. But shorter and faster.

MathKimRobin Over a year ago

Oh OK, you didn't precise it in your question. So here it's a bit more complex. You have to add comma after concatenation except for the last one. Or each time and after remove the last char (it's obviously the useless last trailing comma). If you choose to add each time except for last, second param of forEach is the index of loop

Collectives™ on Stack Overflow

getting string from array in a shorter way

5 Answers 5

8 Comments

Comments

Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related