Dynamically create associative array with string key and JQuery value

Question

I have multiple products on my page and want to create an associative array holding the product number as key and the JQuery element as value so I created this interface

interface ProductMap<T extends JQuery> {
    [productNumber: string]: T;
}

Then, in my class, I initialize it protected elements: ProductMap<JQuery> = {}; and want to fill it with data later on

const products = $(selector);
if (products.length > 0) {
    $.each(products, function (index, product) {
        this.elements[$(product).data('product-number')] = $(product);
    });
}

However, I'm always getting the error

Uncaught TypeError: Cannot set property '{product-number}' of undefined

How exactly do I create such an associative array?

I read that it only works when compiling in ES6 and we compile in ES5 — Musterknabe
– Musterknabe, Commented Sep 25, 2017 at 7:32

Serge K. · Accepted Answer · 2017-09-25 07:34:57Z

1

this.elements is undefined since you change your context using $.each. Keep a reference to your instance in order to fix this problem :

const products = $(selector);
var self = this;

if (products.length > 0) {
    $.each(products, function (index, product) {
        self.elements[$(product).data('product-number')] = $(product);
    });
}

You could also use bind to achieve this.

answered Sep 25, 2017 at 7:34

Serge K.

5,3331 gold badge22 silver badges27 bronze badges

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

8 Comments

Musterknabe Over a year ago

Thanks! Everything being a separate context is hard getting used to when coming from other languages. Totally forgot about that again. Thank you

kevinSpaceyIsKeyserSöze Over a year ago

@Musterknabe If you can use the fat arrow notation $.each(products, (index, product) => {...}); you might don't need to save the context btw.

Serge K. Over a year ago

@kevinSpaceyIsKeyserSöze This is still ES6.

kevinSpaceyIsKeyserSöze Over a year ago

@NathanP. You can write ES6 and compile it as ES5

Serge K. Over a year ago

@kevinSpaceyIsKeyserSöze I know, but it seems that it's not something OP wants, as he said in his previous comment.

|

Collectives™ on Stack Overflow

Dynamically create associative array with string key and JQuery value

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related