Displaying nonspatial data via spatial data in Leaflet

Question

I have two pieces of data; one is nonSpatial Jobs data and one is a spatial grid (polygon that was turned into geoJson). They are being served through separate API's/ajax calls. A primary-foreign key was created to link the two datasets(Cell ID or CID that is created from the southwest coordinate of each grid cell. Ex n89, w113 = CID:n89w113). My goal is for the user to be able to create and display the Jobs data based on the grid cell. Thus fa, I have not been able to achieve this. Assuming that a job already exist with a certain CID (but this job has no spatial value-lat/lng) and there is a corresponding grid cell that has that same CID and is spatial located on a map, how can I use Leaflet (or just javascript) to display the information for the Job corresponding to that grid cell (using a mouseover/click event and popup method like .bindPopup)? Here's my current logic, but I think there is something amiss...

 var globalArrayJobsCID = [];
 $.ajax for Jobs data{
   ...
   data.forEach(function (value) {
     var cid = value.cid;
     globalArrayJobsCID.push(cid);
   ...
   };
   $.getJSON("url', function(data) {
     grid = L.geoJson(data, {...};
     onEachFeature: function(feature, layer) {
     var id = feature.properties.cid;
     globalJobsArrayCID.forEach (item) {
        if(item == id) {
          layer.bindPopup(<Jobs data>);
   });
};

Answer 1

In your globalArrayJobsCID, you just push the cid, not the associated value. And I guess you actually want to show that value (i.e. an item from your data), not the cid itself (or not only that).

Furthermore, in your 2nd step, when you loop through your globalArrayJobsCID to find matches with each polygon / grid cell, you override the layer popup. This may not be a problem if you are sure that you have at most 1 job per polygon. Otherwise, you will display only the last one.

Therefore your code should rather look like:

var globalArrayJobsCID = [];
var grid;

$.ajax("url-for-ajax").done(function (data) {
  // if your data is a simple array, you could even just use it directly
  // instead of globalArrayJobsCID, or globalArrayJobsCID = data
  data.forEach(function (value) {
    globalArrayJobsCID.push(value);
  });

  $.getJSON("url", function (data) {
    grid = L.geoJson(data {
      onEachFeature: function (feature, layer) {
        var id = feature.properties.cid;
        var popupContent = "";

        globalArrayJobsCID.forEach(function (item) {
          if (item.cid === id) {
            // Assuming you want to display item.jobData
            popupContent += "Job: " + item.jobData + "<br />";
          }
        });

        if (popupContent) {
          layer.bindPopup(popupContent);
        }
      }
    });
  });
});