Home » JavaScript » What’s Interesting About This Piece Of Code?

What’s Interesting About This Piece Of Code?

24 commentsWritten on April 18th, 2011 by Davy Brion
Categories: JavaScript

        $.get('/Home/Locations', function (data) {
            $.each(data, function () {
                var id = this.Id;
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(this.Coordinates.Lat, this.Coordinates.Lng),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', function (event) {
                    showDialogFor(id);
                });
            });
        });

« NHibernate ExamplesRecent Additions To My NHibernate Examples »

This entry was posted on Monday, April 18th, 2011 at 14:45 and is filed under JavaScript. You can subscribe to any comments to this entry via RSS 2.0. You can leave a response, or trackback from your own site.

Anonymous
I wouldn’t have expected the function being passed to each to have an Id. How is that used in ShowDialogFor?
http://twitter.com/rxtg confuzatron
I’m stumped. I can’t see anything unusual. Looking forward to finding out the secret.
Anonymous
The id within the addListener refers to the id value captured as a closure in the function above.

Anonymous
But what is /this.Id/? This refers to the function itself. Is jQuery providing the attributes of the current data element as members of the callback before invoking the callback? If so, that’s pretty conventient.

Anonymous
“this” refers to the element being traversed in the loop right?
So I guess that Id is a field of the object being traversed in the “data” array
The fields of the object are provided _after_ the callback is executed
Just guessing a bit here!

http://davybrion.com Davy Brion
what do you mean with “The fields of the object are provided _after_ the callback is executed”?
if you’re talking about the Id and Coordinates fields, they’re available as you loop through the data

Anonymous
“When you loop through the data” is the $.get callback

http://twitter.com/dagda1 dagda1
Is it that the ‘this’ in ‘this.Id’ is a DOM element when inside the jquery each iterator?

http://davybrion.com Davy Brion
it actually doesn’t refer to a DOM element

http://twitter.com/dagda1 dagda1
is that ‘this’ still applies to the outer ‘each’ funciton when you create the new google.maps.Marker object?
It has to be something to do with scoping.
Or is it that you have to capture the id because this is in a different scope when inside addListener?

http://davybrion.com Davy Brion
it’s not about the Marker object

http://twitter.com/dagda1 dagda1
The id in showDialogFor(id); is a different id in the one that is defined in the outer ‘each’ function is my last attempt .

http://davybrion.com Davy Brion
no, it’s the correct id

Lukic Djordje
It’s interesting because it has a security issue.

http://davybrion.com Davy Brion
aha, wasn’t aware of that
since it’s not the reason why i posted this, could you share what the security issue is?

Lukic Djordje
Phil Haack bloged about it here : http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx
I’m sure he can explain it better that me
By the way, this is why returning JSON after a GET request is disabled by default in ASP.NET MVC 3.

Lukic Djordje
OK, it was not the code per se, but that’s the only thing I could get out of your code.

http://davybrion.com Davy Brion
it’s an interesting issue though… he also says this:
“The good news is that it seems to me that most modern browsers are not affected by this. I have a URL you can click on to demonstrate the exploit, but you have to use FireFox 2.0 or earlier to get the exploit to work. It didn’t work with IE 6, 7, 8, FireFox 3 nor Google Chrome.”
Hopefully, our even more modern browsers are still not affected by this
and even then you could require a post to retrieve sensitive data through json

http://twitter.com/rauhr Ryan Rauh
I suppose it could be interesting that you are adding an event handler inside an each loop passing it an anonymous function that uses a variable created inside the loop.
Does this work or does it always point to the last Id in your data array? If so its pretty amazing that when that click event fires it knows what id is. Javascript closures are magic

http://davybrion.com Davy Brion
bingo
JaviCrespo also mentioned it but your explanation is longer :p
it works, but only because i captured the value of ‘this.Id’ in the ‘id’ variable which is declared _within_ the scope of my Each callback. For the record, that’s not specific to JavaScript closures. The same trick can be used in C# as well.
And what i find particularly interesting about it is that i can completely avoid having to come up with some kind of structure to be able to reference the correct id again based on which marker was clicked.

http://twitter.com/danielpresser Daniel Presser
The only interesting thing I see is that you had to save your Id in a variable so it can be used in the ‘click’ handler, because the hanlder will have a different “this” object when called.
sinful bikinis
Bikinis are frequently believed of as one affliction swimwear thing that facilitates one to show away your figure. What a great offer better event within your existence Affliction beach shorts to show away your type than when you’re are expecting a baby. That small bump within your burberry bikinis uk center is really a symbolic affliction shorts representation of just what is developing within you and that is pretty exceptional. many thanks to Hollywood celebrities, maternity has grown to acquire a celebrated event in the woman’s life, and that suggests that you’ve gained the best to show away your newborn bump. So what a great offer better way than with burberry swim bikini maternity bikinis. Aff short pants Typically, maternity bikinis are produced a touch in different ways to accommodate burberry bikini top your shape. very a few of those could be used best at your tummy collection or just under the tummy. will require for you be searching for help cheap burberry swimsuit for the midsection you could properly need to think about Christian Audigier swimwear placing on burberry swim shorts your bikini under your affliction short pants tummy
Jay Douglass
Couldn’t you just do this?
$.each(data, function (key, value) {…
showDialogFor(value.Id);
And avoid the sometimes confusing JavaScript this pointer.

http://davybrion.com Davy Brion
not sure if that’ll work… won’t the value variable be changed with each iteration, thus preventing properly closing on its value? i guess it depends on where the value variable is declared within jQuery’s .each implementation: once before the loop or every time right before the callback is called.

What’s Interesting About This Piece Of Code?

Meta

Recent Posts

Categories

Archives