Match input value to JSON object in array

user_3674263 0
Viewed 733

I have an input for searching for a store number to find its position on the map. The JSON is hosted here, but I will leave a snippet below.

"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"
}

The function is meant to take the value of the search and get the lat and long values of that. So searchString = 23 would give the following;

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

Here is what I tried below:

    $('#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;
    });
jquery json javascript
3 Answers

data contains the object that results from parsing the JSON response.

Since $.getJSON is asynchronous, you can't use the variables that are set in the callback outside it. You need to call map.setView() in the callback.

$('#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;
});
user_14918950

Like many people have suggested in the comments, you can access a certain key within the object (if it exist) by doing allStoresJson["some key within the allStoresJson"].

If we put this into practice using the code you provided, you should be able to do something like this: 

    $('#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;
});

Hope this helped.

user_71452930

I've made the change to make the logic happen in the success of the getJSON as it should happen, however I also added some logic so that if the url is a static json file, it will only retrieve the file once. So the second, and beyond, filter request should be faster than the first.

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

user_15861740
Related