JSON Data retrieval from Remote Response

Question

I'm working on a project where I need to get the JSON Response and display markers in Google Map. When I try to get JSON response from .json test file, it works fine (Code is provided below). But When I try similar code to get JSON response from remote URL it doesn't work. I'm not sure where I'm missing.

Code with geoLocationDataSet.json Test File.

getPetsLocations: function (lat, lng, max) {

            return $.getJSON("data/geoLocationDataSet.json") ;

           },

Input Data Set in geoLocationDataSet.json File:

[
    {
        "type":"LOST",
        "alertID":"320",
        "petID":"11534",
        "dateTime":"03\/14\/2017",
        "petName":"Samson",
        "ownerName":"TEMP_Haywood",
        "reward":"100",
        "distance":"7",
        "latitude":"27.9506",
        "longitude":"-82.3672",
        "place":"Greater Palm River Point CDC 33619",
        "image":null
    },
    {
        "type":"LOST",
        "alertID":"328",
        "petID":"11132",
        "dateTime":"03\/14\/2017",
        "petName":"Tucker",
        "ownerName":"TEMP_Phyliss",
        "reward":"0",
        "distance":"12",
        "latitude":"27.9506",
        "longitude":"-82.2872",
        "place":"Villa Place 33510",
        "image":"https:\/\/s3.amazonaws.com\/petimage\/58c857b9c7ee8"
        }
]

Now this is the code for Remote URL that doesn't work, I'm getting response but when I try to return data it's not able to return expected data set like above example, not able to show markers in Google Map.

getPetsLocations: function (lat, lng, max) {
            //alert('Before call..');
            $.getJSON("http://dev.mywaggintales.com/pets/d_lostfound.php?mce=27.939224,-82.462295&mra=25&mem=chholloway@me.com&mac=1234", function(data){
                alert(JSON.stringify(data.ds_petAlert[1]));
                return data.ds_petAlert[1]; 
           });  
},

I'm not exactly sure where I'm missing. IT would be great if you please take a look at it and let me know the issue with above code when I parse JSON data and return it.

Either return the response into a function or look at promises — StudioTime, Mar 19 '17 at 07:50
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — StudioTime, Mar 19 '17 at 07:51
Thanks. Would you be able to make the code change and share with me? I'm quite new to JS, not able to follow it. — Partha Mitra, Mar 19 '17 at 07:52
Not duplicate, I tried those approaches, unfortunately didn't work for me. — Partha Mitra, Mar 19 '17 at 07:53
You need to at least try, there's enough in that question to help you — StudioTime, Mar 19 '17 at 07:54
What did you try? Show what you tried and we can help - this is not a code writing service — StudioTime, Mar 19 '17 at 07:54

score 0 · Answer 1 · answered Mar 19 '17 at 07:59

It's a callback function you passed in the remote URL. You can't just return the data because the callback function is not actually called by you.

A simple way to use callback function is create a new function outside:

function onReceiveData(data) {
 // you will get your data here.
}

// your code.
getPetsLocations: function (lat, lng, max) {
            //alert('Before call..');
            $.getJSON("http://dev.mywaggintales.com/pets/d_lostfound.php?mce=27.939224,-82.462295&mra=25&mem=chholloway@me.com&mac=1234", function(data){
                alert(JSON.stringify(data.ds_petAlert[1]));
                onReceiveData(data.ds_petAlert[1]); 
           });  
},

Partha Mitra · Accepted Answer · 2017-03-20T18:19:58.953

Call back function didn't work for me. But found a solution. Rather than calling getPetsLocations function I added an Ajax call in initMap Function. Code is provided below. - Thanks.

initMap: function (position) {
            //Delcare function variables
            var myOptions,
                mapObj = _mapObj,
                mapElem = _mapElem,
                pin,
                locations = [],
                latlng;

            _mapElem = mapElem; //Cache DOM element

            // Use Google API to get the location data for the current coordinates
            //latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            latlng = new google.maps.LatLng(27.9506, -82.4572);

            myOptions = {
                zoom: 11,
                center: latlng,
                mapTypeControl: false,
                navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };


            mapObj = new google.maps.Map(mapElem, myOptions);
            _mapObj = mapObj; //Cache at app level

            pin = [
                {
                    position: latlng,
                    title: "New York"
                }
            ];

            _private.addMarkers(pin, mapObj);
            // Get stores nearby
            $.ajax({
                type: "GET",
                url: "http://dev.mywaggintales.com/pets/d_lostfound.php?mce=27.939224,-82.462295&mra=25&mem=chholloway@me.com&mac=1234",
                success: function (data) {
                    setTimeout(function () {
                        //do what you need here
                        var result1 = JSON.parse(data);
                        var result = result1.ds_petAlert[1];
                        //options.success(lostPets);

                        var len = result.length,
                            pinImage = new google.maps.MarkerImage(
                                "images/lostPet.png",
                                new google.maps.Size(49, 49),
                                new google.maps.Point(0, 202));

                        for (var i = 0; i < len; i++) {
                            locations.push({
                                title: result[i].petName + ", " + result[i].place,
                                position: new google.maps.LatLng(result[i].latitude, result[i].longitude),
                                icon: pinImage,
                                animation: google.maps.Animation.DROP
                            });
                        }
                    _private.addMarkers(locations, mapObj);
                    }, 1500);
                },
                error: function (err) {
                    alert("Error reading the data");
                    options.error(err);
                }
            });
        },

JSON Data retrieval from Remote Response

2 Answers2