Question

I’m making a websites that displays noise measurement data from different locations. The data for each location is captured on a sound level meter device and it is then read with a windows-based application. The application then uploads data on a web server as a .js file with an array variable in it. This .js files are refreshed every 5 minutes.
I first created a javascript application that displays live data for a single measuring unit. But now I need to display data on a map for all the locations. The problem is that the windows application on each location makes a file with the same name and same variables only on another location. I’m having some trouble with reading the correct data.
This is what I did so far:

    function removejscssfile(filename, filetype){
         var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
         var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
         var allsuspects=document.getElementsByTagName(targetelement)
         for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
          if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
           allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
         }
        }

    function updateData(){
    var numberOfNoiseSniffers = noiseSniffers.length-1;
    var j = 0;
    for (i=0;i<=numberOfNoiseSniffers;i++) {
        file = '../'+ noiseSniffers[i] + "/" + "CurrentMeasurement.js";
        $.include(file,function(){
            laeq[j] = currentMeas[1][1];
            lastUpdate[j] = currentMeas[0][1];
            if (j==numberOfNoiseSniffers){
                updateMarkers();
            }
            removejscssfile(file[0], "js");
            j++;
        });
    }

    t=setTimeout(function() { updateData() }, 300000);
}


    $(function (){
    map = new google.maps.Map(document.getElementById("gMap"), myOptions);
    //noiseSniffers is an array where I have save all the folder names of different measurement locations
    var numberOfNoiseSniffers = noiseSniffers.length-1;
    var j = 0;
    for (i=0;i<=numberOfNoiseSniffers;i++) {
        var file = '../'+ noiseSniffers[i] + "/" + "CurrentMeasurement.js";
        //I am using include plugin for jquery to include files because it has a callback for when a file is actually loaded
        $.include(file,function(){
            //a set of global arrays that keep the data from the loaded file and this data is then displayed in google maps markers
            laeq[j] = currentMeas[1][1];
            lastUpdate[j] = currentMeas[0][2];
            latitude[j] = systemstats[12][5];
            longitude[j] = systemstats[11][6];
            //checking to see if I am in the process of including the last file
            if (j==numberOfNoiseSniffers){
                //a function that creates google maps markers
                createMarkers();
            }
            //after that I remove the files that were just included and read
            removejscssfile(file, "js");
            j++;
        });
    }
    setTimeout(function() { updateData() }, 300000);
    });

I got the function for removing my .js file here: Dynamically removing an external JavaScript or CSS file.
And this is the jquery plugin for loading the .js file: Include File On Demand.
The initial load usually works (sometimes it happens that only one or no markers get loaded. But the update function mostly returns the same data for both locations.
So what I want to know is, how can I firstly make my code working and how to optimize it. I posted just the main parts of the javascript code, but I can provide all the code if it is needed. Thanks for any help.

Answer 1

I think you need some sort of JSONP-like solution.

Basically load data on the server side, then wrap it in a method call before returning it to client side. Your response should look something like this:

var location_data = [1,2,3,4]
updateLocation('location_id', location_data) 

Now you define an updateLocation() function in your client side script. Now, every time you need new data, you create new ‘script’ tag with src pointing to your server side. When the response is loaded, your updateLocation() will be invoked with correct params.

I hope this is clear enough