SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot Hieronymus's Avatar
    Join Date
    Nov 2004
    Location
    Nederland, Eindhoven
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery match ajax results with index

    Hi, I'm having trouble with a problem I get quite often.
    I have a series for which I want to make individual ajax requests, but I need to keep track wich results belong to what item. I can't seen to pass addional parameters into the callback function

    Code:
    refresh2: function(){
        for(var i in myMap.markers){
    
            $.getJSON('/json/units/position/'+ myMap.markers[i].id, function(data) {
                // Here I need the index i to make sure I update the right marker
    
            });
        }
    }
    The only way I can think of is actually sending the index to the server and then have it send back with the data. That's rather ugly I think, there must be a better way. Any ideas?
    What good are one-liners if they don't
    fit.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You have the function that needs to know about the variable i

    Code:
    function(data) {
        // Here I need the index i to make sure I update the right marker
    });
    Let's call that function callback

    Code javascript:
    var callback = ...;
    $.getJSON('/json/units/position/'+ myMap.markers[i].id, callback);

    Let's return that callback function from a separate function:

    Code:
    function createCallback() {
        return function(data) {
            // Here I need the index i to make sure I update the right marker
        });
    }
    When that function is returned, it will retain with it any variables that were in that same function. This is called closure.
    If we call the createCallback function with an argument, the returned function will retain knowledge of that argument.

    Code javascript:
    function createCallback(i) {
        return function(data) {
            // Here I need the index i to make sure I update the right marker
        });
    }
    ...
    var callback;
    for (...) {
        callback = createCallback(i);
        $.getJSON('/json/units/position/'+ myMap.markers[i].id, callback);
    }

    By the way, do not use for...in to loop over items of an array. While that works in some cases, there are several situations that just cause that to break.
    for...in is designed to loop over the properties and methods of an object, not an array. It's best to use a for loop to loop over arrays instead

    Code javascript:
    var i;
    for (i = 0; i < myMap.markers.length; i += 1) {
        ...
    }

    Remember that with an array you're not looping through all of the enumerable properties of an object, which is what for...in is designed to do.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot Hieronymus's Avatar
    Join Date
    Nov 2004
    Location
    Nederland, Eindhoven
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    where did I go wrong?

    Hi Paul,

    Thanks for your reply and naming the concept so I can do some more research on it. I think I get the idea, but it's not working

    Code JavaScript:
        refresh2: function(){
        	// Build function that for each marker in myMap.markers:
        	// - get's the latest position
        	// - remove and re-add the marker to the map
        	// - remove the marker from the list and add the updated info, or update it's info in the table
        	var i;
        	for(i = 0; i < myMap.markers.length; i += 1){
            	function createCallback() {
            	    return function(data) {
            	        // Here I need the index i to make sure I update the right marker
            	    	console.log(data);
            	    	console.log(i);
            	    }
            	}
     
        		var callback = createCallback(i);
        		$.getJSON('/json/units/position/'+ myMap.markers[i].id, callback); 
     
        	}
     
        },
    I have 4 markers.
    The console output is still "4" every time and not the index at the moment te request is done. The data is OK, it is the result of the individual requests.
    I can't see my mistake.
    What good are one-liners if they don't
    fit.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Two problems.

    1. Move the createCallback function outside of the loop
    2. Give the createCallback function an argument
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •