从远程响应中检索 JSON 数据

Question

我正在做一个项目，我需要获取 JSON 响应并在 Google 地图中显示标记。当我尝试从 .json 测试文件中获取 JSON 响应时，它工作正常（代码如下）。但是当我尝试类似的代码从远程 URL 获取 JSON 响应时，它不起作用。我不确定我错过了哪里。

带有 geoLocationDataSet.json 测试文件的代码。

getPetsLocations: function (lat, lng, max) {

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

           },

geoLocationDataSet.json 文件中的输入数据集：

[
    {
        "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"
        }
]

现在，这是无效的远程 URL 的代码，我得到了响应，但是当我尝试返回数据时，它无法像上面的示例一样返回预期的数据集，无法在 Google 地图中显示标记。

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]; 
           });  
},

我不确定我在哪里失踪。如果您在我解析 JSON 数据并返回它时请看一下并告诉我上面代码的问题，那就太好了。

Answer 1

这是您在远程 URL 中传递的 callback 函数。你不能只返回数据，因为回调函数实际上并没有被你调用。

使用回调函数的一个简单方法是在外部创建一个新函数：

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]); 
           });  
},

Answer 2

回调函数对我不起作用。但找到了解决办法。我没有调用 getPetsLocations 函数，而是在 initMap 函数中添加了一个 Ajax 调用。下面提供了代码。 - 谢谢。

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);
                }
            });
        },