Match input value to JSON object in array

Question

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

Well, 23 is a key in that object, so you can just access it. — Taplar
– Taplar, Commented Sep 18, 2018 at 21:38
@Taplar allStoresJson is the URL that he downloads the JSON from. — Barmar
– Barmar, Commented Sep 18, 2018 at 21:44
Yeah, so now the issue with the updated snippet is that you need to be doing your logic in the success callback of the getJSON method. Since it's asynchronous, the variables will not be set before it finishes — Taplar
– Taplar, Commented Sep 18, 2018 at 21:45
As an aside note, I would suggest potentially caching the result of the request so you don't have to do it multiple times. — Taplar
– Taplar, Commented Sep 18, 2018 at 21:48

Barmar · Accepted Answer · 2018-09-18 21:47:38Z

3

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

answered Sep 18, 2018 at 21:47

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andresson · Accepted Answer · 2018-09-18 21:52:36Z

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.

Taplar · Accepted Answer · 2018-09-18 21:59:18Z

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

Collectives™ on Stack Overflow

Match input value to JSON object in array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related