Question

我有一个输入用于搜索商店编号以在地图上找到其位置。 JSON为hosted here，但我将在下面留下一个摘要。

"22": {
    "Lat": "43.1022902",
    "Address": "3065 NY-50  Saratoga Springs  NY 12866  USA",
    "Long": "-73.7377407"
},
"23": {
    "Lat": "40.3581539",
    "Address": "2767 Papermill Rd  Reading  PA 19610  USA",
    "Long": "-75.9850194"
},
"24": {
    "Lat": "40.1893263",
    "Address": "347 Washington Rd  Washington  PA 15301  USA",
    "Long": "-80.2265591"
},
"26": {
    "Lat": "38.0240453",
    "Address": "1968 Pavilion Way  Lexington  KY 40509  USA",
    "Long": "-84.41592919999999"
}

该函数用于获取搜索的值并获取其lat和long的值。因此searchString = 23会给出以下内容；

"Lat": "40.3581539",
"Address": "2767 Papermill Rd  Reading  PA 19610  USA",
"Long": "-75.9850194"

这是我下面尝试的内容：

    $('#search-bar').submit(function () {
        searchString = $("#search").val();
        $.getJSON(allStoresJson, function (data) {
            query = allStoresJson[searchString]
            console.log(query)
            lat = query.Lat
            long = query.Long
        })
        var point = new L.LatLng(lat, long);
        map.setView(point, 11, {
            animation: true
        })
        return false;
    });

Answer 1

data包含解析JSON响应后产生的对象。

由于$.getJSON是异步的，因此您不能使用在其外部的回调中设置的变量。您需要在回调中调用map.setView()。

$('#search-bar').submit(function() {
  searchString = $("#search").val();
  $.getJSON(allStoresJson, function(data) {
    query = data[searchString];
    console.log(query)
    lat = query.Lat
    long = query.Long
    var point = new L.LatLng(lat, long);
    map.setView(point, 11, {
      animation: true
    })
  })
  return false;
});

Answer 2

就像很多人在注释中建议的那样，您可以通过执行allStoresJson["some key within the allStoresJson"]来访问对象中的某个键（如果存在）。

如果我们使用您提供的代码将其付诸实践，您应该可以执行以下操作：

    $('#search-bar').submit(function () {
    searchString = $("#search").val();

    $.getJSON(allStoresJson, function (data) {
        const desiredObject = allStores[searchString]; // Note here we put the searchString as the key.
        if(desiredObject) { //We make sure that we found a object withing the provided json before trying to access the lat & long. 
           // We want to run this code block within the $.getJSON callback, because it asynchronous .
           var lat = desiredObject.Lat
           var lon = desiredObject.Long
           var point = new L.LatLng(lat, long);
           map.setView(point, 11, {
              animation: true
           })
      }
    })

    return false;
});

希望这会有所帮助。

Answer 3

我已经进行了更改，使逻辑在应该成功发生的getJSON中成功实现，但是我还添加了一些逻辑，以便如果url是静态json文件，则它将仅检索一次该文件。因此，第二个及以后的过滤器请求应该比第一个更快。

(function() {
  //keep track of if the request already happened
  //so we can save multiple requests for a static resource
  //(if it is a static resource)
  var previousRequest;

  $('#search-bar').on('submit', function(e) {
    //prevent the submit
    e.preventDefault();
    //get the search value
    var searchString = $("#search").val();
    //if we have not done the request before, start it
    if (!previousRequest) {
      previousRequest = $.getJSON(allStoresJson)
    }
    //once the request is done, or if it is already done,
    //perform our filtering logic
    previousRequest.then(function(data) {
      var query = data[searchString]

      if (query) {
        var lat = query.Lat
        var long = query.Long
        var point = new L.LatLng(lat, long);
      
        map.setView(point, 11, {
          animation: true
        });
      }
    });
  });
}());

将输入值匹配到数组中的JSON对象

3 个答案: