Get data of pushpin on click event

Question

I am working on a Tobacco shop finder Windows 8.1 Store application. The main idea is, that when the user opens the app a map appears zoomed in to his position. This map displays the tobacco shops as pushpins. The data of these shops are stored in a json file with the following structure:

{
addr: Some street 12,
lng: longitude,
lat: lattitude,
open: {10:00-23:00, 20:00-22:00, and 5 more}
}

It contains the address, the longitudinal position, the lattitudinal position and the open hours of the shop.

This is the javascript code I use to put the pushpins in the correct position on the map:

var pins = [];

  $.getJSON(dbURL, function (response) {
        pins = response;
        $.each(pins, function (i, item) {
            var _location = new Microsoft.Maps.Location(item.lat, item.lng);

            var pin = new Microsoft.Maps.Pushpin(_location, { description: i, icon: markerImgURL, height: markerImgHeight, width: markerImgWidth, draggable: false });
            Microsoft.Maps.Events.addHandler(pin, 'click', showDetails);

            map.entities.push(pin);
        });
    });

I've added a click handler for each pin, so that when a user clicks (or touches) a pin, a window slides in with detailed information about it.

This is my showDetails() function:

function showDetails() {
    var details = $("#details");

    details.animate({
        "right": parseInt(details.css("right")) == 0
                ? -1 * details.innerWidth() - 5
                : 0
    }, 500)
}

My problem is, that I don't really know how can I access the data of that individual pin from this function. I've added an id as the description of the pin, this would reference to the "pins" array where the full data is saved, but if I call the function like showDetails(i) inside my $.each() loop, the application would freeze at startup.

tl;dr: How can I access the description property of a pushpin from an external function without passing an id to the function?

Thanks!

Ryan Joy Ryan Joy · Accepted Answer · 2013-10-21T02:16:29

Your showDetails() event handler will be passed the event object as a parameter. If you update your function signature to accept this event arg, you can access the target object which will be a reference to the pushpin. From there you can access the description and other properties

function showDetails(e) {
    var details = $("#details");    
    var smokeShop = e.target;

    WinJS.Utilities.setInnerHTML(details, smokeShop.description);

    details.animate({
        "right": parseInt(details.css("right")) == 0
                ? -1 * details.innerWidth() - 5
                : 0
    }, 500)
}

Get data of pushpin on click event

1 Answers