Undefined variable in jquery's ajax call

Question

I have a relatively simple code, I am annding event listeners in a loop, but the loop variable is not available when mapping the results.

for (let index = 0; index < 2; ++index) {
    $("#id" + index).on("keyup", function () {

        $.ajax({
                type: "GET",
                url: "https://some-url.com",
                dataType: "json",
                success: function (data) {
                    $('#div' + index).append(
                        $.map(data, function (myData, index) {
                            return '<a href="#" onclick="selectId(index, myData.id);"> Click me </a>'
                        }).join());
                }
            }
        );
    });
}

The result is: Uncaught ReferenceError: index is not defined

Edit: if I just use myData.id for example, everything works like a charm Any ideas what am I missing here?

because '<a href="#" onclick="selectId(index, myData.id);"> Click me </a>' generates a string with no reference to index. When rendered, it is looking for a global variable index — epascarello
– epascarello, Commented Oct 28, 2020 at 14:24
"selectId(index, myData.id)" -> "selectId(" + index + ", " + myData.id + ")" assuming id is an integer. Or use string interpolation stackoverflow.com/a/35984254/2181514 — fdomn-m
– fdomn-m, Commented Oct 28, 2020 at 14:25
if I just use myData.id for example, everything works like a charm — Farkas Tamas
– Farkas Tamas, Commented Oct 28, 2020 at 17:05

Quentin · Accepted Answer · 2020-10-28 14:19:06Z

1

You are generating strings of HTML with embedded JS. The JS won't be evaluated until it is inserted in the document. That's a different scope with no index or myData variables.

Generate a jQuery object instead. And if you don't want to link anywhere, don't use a link!

 function (myData, index) {
     const $button = $("<button />")
     $button.text("Click me");
     $button.on("click", () => selectId(index, myData.id));
     return $button;
 }

(And don't join the array into a string, just append the array of jQuery elements).

answered Oct 28, 2020 at 14:19

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Farkas Tamas Over a year ago

if I just use myData.id for example, everything works like a charm

Collectives™ on Stack Overflow

Undefined variable in jquery's ajax call

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related