Question

am making an ajax call to retrive json data

i then store the retrived data into associative arrays

but when i try to get the data from the associative arrays the keys and values in them are undefined
I am guessing its because the the data is getting stored as value[i], and as the loop is finished it no longer knows what i is, how do i go about fixing this?

can be seen on this page http://www.focus-on-plants.com/locator_iconed.php
here is my script

myUrl = 'geo_locator_icons.php';// url of php page that retrives the locations
    // start a new ajax call
    $.ajax({  
        type: "GET", //The type of HTTP verb (post, get, etc)  
        url: myUrl, //The URL from the form element where the AJAX request will be sent  
        dataType: 'json',
        success: function(dat) { //Triggered after a successful response from server    
            var myData = dat.icons;
            var count = myData.length - 1;
            console.log(dat)
            console.log(myData)

            for(i=0; i < count; i++){
                // Creating the icon 
                var icon_image = "'"+myData.folder_ico+myData.image_ico+"'" //set image
                var icon_size = "new google.maps.Size"+myData.iconsize_ico //set size
                var icon_origin = "new google.maps.Point(0, 0)" // The origin
                var icon_anchor = "new google.maps.Point"+myData.iconanchor_ico //set anchorpoint
                // Creating the shadow
                var shadow_image = "'"+myData.folder_ico+myData.shadow_ico+"'" //set image
                var shadow_size = "new google.maps.Size"+myData.shadowsize_ico //set size
                var shadow_origin = null // The origin
                var shadow_anchor = "new google.maps.Point"+myData.iconanchor_ico //set anchorpoint
                // Creating the shape
                var shape_type = 'poly'
                var shape_coord = myData.imagemap_ico
                // Creating the icon
                var icon = new google.maps.MarkerImage(icon_image);
                // Creating the shadow
                var shadow = new google.maps.MarkerImage(
                    shadow_image,
                    shadow_size,
                    shadow_origin,
                    shadow_anchor
                );
                // Creating a shape
                var shape = '{type: '+shape_type+', coord:'+shape_coord+'}'

                // add the icon to the mapIconsArray
                iconImageArray[myData.name_ico] = new google.maps.MarkerImage(
                    icon_image,
                    icon_size,
                    icon_origin,
                    icon_anchor
                );
                // add the icon to the shadowIconsArray
                iconShadowArray[myData.name_ico] = new google.maps.MarkerImage(
                    shadow_image,
                    shadow_size,
                    shadow_origin,
                    shadow_anchor
                );
                // add the shape to the shapeIconsArray
                iconShapeArray[myData.name_ico] = shape
            };
        },
        error: function(dat) { //Triggered if an error communicating with server   
            $("#geo_detail").append('<label>There was an error retriving the Icons: '+dat+'<label><br>');
            $('#loc_button').fadeIn('slow');
            return 0;
        },  
    });
    console.log(iconImageArray)
    console.log(iconShadowArray)
    console.log(iconShapeArray)

<———————–update on what i am trying to achive——————–>

The createIcons() function will run when the page loads after the map initialises.

I want it to store the data into the 3 arrays(now objects) i have created

var iconImageArray = {};
var iconShadowArray = {};
var iconShapeArray = {};

i have a function called addMarkers() which adds markers to the map i want to be able to change the marker image depending on the type of marker that is added.

the add marker script:

// ADD MARKER FUNCTION
// Adds a marker to the map
// PARAMS: 
// @myLatrLng - latLng object
// @dat - Data containg location Info
function addMarker(map, myData){
    // Create the marker
    // create the marker info first
    myLatLng = new google.maps.LatLng(myData.lat_mdt, myData.lng_mdt);
    markersArray.push(myLatLng);
    markersInfoArray.push(myData);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
    title: myData.name_mdt,
    icon: iconImageArray[myData.name_etp],
    shadow: iconShadowArray[myData.name_etp],
    shape: iconShapeArray[myData.name_etp],
   });

   // Wrapping the event listener inside an anonymous function
   // that we immediately invoke and passes the variable i to.
   (function(myData, marker) {
       // Creating the event listener. It now has access to the values of
       // myData and marker as they were during its creation
       google.maps.event.addListener(marker, 'click', function() {
       //create thecontent for the infowindow
       var content = createContent(myData);
       var infowindow = new google.maps.InfoWindow({
           content: content
       });
       infowindow.open(map, marker);
    });
})(myData, marker);             
};

<———————-update———————————–>

well this is where i am at,
ive done loads of testing with static data and the icons for the map generate fine, so my actual google map code is ok and working.

As soon as i start trying to reference items from the myIconsArray object it all breaks and i get no console messages that are set up in the addMarkers function.

I do notice however when i look in the console for the myIcons Array thwe structure looks incorrect:

within myIconsArray i have 3 objects, icon{} shadow{}, shape{}

shape seems to be ok its ;like this:
shape{
orchid day{
coord{}
type{}
}
stokist{
coord{}
type{}

} 
website visitor{
    coord{} 
    type{}

}

}

but image and shadow objects have wrong names are like this:

image{
orchid day{
Na{} //should be size (value is correct)
anchor{} //shoule be anchorpoint (value is correct)
b{} should be origin (value is correct)
hb{} // should be image (value is correct)
hc{} do not kn ow why this is here is undefined and not used by me!!!
}
stokist{
coord{}
type{}

} 
website visitor{
    coord{} 
    type{}

}

}

Answer 1

The last 3 console.log() show undefined because they run before the response is received from the request.

Any code that relies on the AJAX response needs to be placed in (or called from) the success: callback.

So try moving them to the end of your success: callback:

 success: function(dat) { 
       ...
        // add the icon to the shadowIconsArray
        iconShadowArray[myData.name_ico] = new google.maps.MarkerImage(
            shadow_image,
            shadow_size,
            shadow_origin,
            shadow_anchor
        );
        // add the shape to the shapeIconsArray
        iconShapeArray[myData.name_ico] = shape
    };
    console.log(iconImageArray)
    console.log(iconShadowArray)
    console.log(iconShapeArray)
 }, 
 error: func...

EDIT: Additional issue was that the i variable was not being utilized to get the value of the item at the current iteration in the Array, as in myData[ i ].name_ico