TypeScript each() as an Arrow function

Question

I have the following TypeScript function:

$.each($("[data-static-map-image]"), function () {
    $(this).attr("src", $(this).data("mapImageUrl"));
});

I would like to convert this into an Arrow function. Unfortunately, I can't figure out how to make it work with the each loop. Can someone give me a hint?

P.S. I ask for your indulgence as I am still in the beginning of the learning phase.

It is unfortunately given within the scope of the project I am involved in. So I have to use it. — develop7761
– develop7761, Commented Jul 14, 2022 at 6:00

trincot · Accepted Answer · 2022-07-14 06:13:54Z

1

The jQuery documentation on jQuery.each explains that the callback gets arguments:

callback
Type: Function( Integer indexInArray, Object value )
The function that will be executed on every value.

So if you really want to stick with jQuery, then make use of the arguments passed to the callback function:

$.each($("[data-static-map-image]"), (i, elem) => {
    $(elem).attr("src", $(elem).data("mapImageUrl"));
});

answered Jul 14, 2022 at 6:13

trincot

357k38 gold badges282 silver badges339 bronze badges

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

Comments

Some random IT boy · Accepted Answer · 2022-07-14 06:04:53Z

0

You can do this in plain JavaScript (and TypeScript too)

Use querySelectorAll to get all elements matching your selector and then use the Array#forEach function:

const allElements = Array.from(document.querySelectorAll('[data-static-map-image]'))

allElements.forEach(element => {
  const url = element.getAttribute('data-mapImageUrl')
  element.setAttribute('src', url)
})

The main reason you cannot use an arrow function in your context is because this refers to the outer scope as opposed when using anonymous functions which have their own this which jQuery is going to bind to each of the elements

edited Jul 14, 2022 at 6:04

answered Jul 14, 2022 at 6:00

Some random IT boy

8,5653 gold badges29 silver badges63 bronze badges

4 Comments

trincot Over a year ago

There is no need to call Array.from.

Some random IT boy Over a year ago

True. But I find it very convenient as NodeList is missing some of the Array functional predicates such as filter

trincot Over a year ago

In that case, you don't need forEach, and can use the callback argument of Array.from.

Some random IT boy Over a year ago

That'd be mapping each of the elements into a new Array in case we still store stuff into a variable and resulting an array of undefined if we forget to return the element

Collectives™ on Stack Overflow

TypeScript each() as an Arrow function

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related