0

I have been tasked with adding a feature to an existing application.

At the moment it shows a google map where and a overlay of a specific area using coordinates will be color coded red if there are no codes in the XML HTTP response. Then if there is a value then color it green.

function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      stationground = xmlhttp.responseText.split(",");
    }    
  }
  xmlhttp.open("GET","stationareas.asp",true);
  xmlhttp.send();

  console.log(stationground);
}


function areaStatus() {
  loadXMLDoc();
  map.data.setStyle( function(feature) {
    var featurecountry = feature.getProperty('letter');
    if (stationground.indexOf(featurecountry) != -1) {    
      return/** @type {google.maps.Data.StyleOptions} */ {
        fillColor: 'red' , fillOpacity: 0.25 };
    } else {
      return/** @type {google.maps.Data.StyleOptions} */ {
        fillColor: 'green' , fillOpacity: 0.25 }; 
    }

    console.log(featurecountry);
  });
}

The console.log returns a list of items that are listed in the SQL query in stationareas.asp.

Is it possible within the areaStatus() function to somehow check if the response already exists and if so can we count that to say if there is 3 values of "Apple" then color that section Green. But if there is >5 color that section "Purple".

Hope this makes sense. Any help would be very helpful!

Structure of response:

["C04", "C04", "C09", "C21", "C24", "C26", "C43", "C46", "C46", "C66", "C68", "C21", "C09", "C21", "C21", "C21", "E10", "E11", "E13", "E14", "E20", "E20", "E22", "E26", "G10", "G10", "G10", "G10", "G10", "G10", "G10", "G10", "G23", "G38", "G38", "G60", "G60", "G60", "G10", "G10", "G10", "G60", "L15", "L30", "L30", "L30", "L31", "L32", "L32", "L35", "L55", "L55", "L72", "L95", "L30", "L30", "L55", "L30", ""]

Gary Henshall
  • 72
  • 2
  • 11
  • I haven't tried anything substantial. At first i was trying with IndexOf() but realised that was not the way. I have just been researching and havent come across anything that has helped. I could count how many values there are but i need to do a check if there are so many individual responses of each value. If that makes sense. Like my Apple example above. – Gary Henshall Jun 22 '16 at 14:19
  • 1
    This question isn't really answerable without knowing what the structure and values of your XML response are. If its an array, just count the number of occurrences. Something like this would get you started: http://stackoverflow.com/questions/17313268/find-the-number-of-occurrences-a-given-value-has-in-an-array – Adam Konieska Jun 22 '16 at 14:27
  • Thanks for that. I will take a look. I have added the structure of my response. – Gary Henshall Jun 22 '16 at 14:37

1 Answers1

2

You'd need to de-duplicate the response array, and count the occurrences of each result.

There are many Stack Overflow search results on the topic of de-duplicating/counting unique occurrences in JavaScript. Here is a crude way to do it using O(n*n) that will also build your return objects.

JavaScript

// update the colors
function updateColors(obj) {
    if(obj.count == 1) {
        obj.fillColor = "red";
    } else if(obj.count < 3) {
        obj.fillColor = "yellow";
    } else if(obj.count < 10) {
        obj.fillColor = "green";
    } else {
        obj.fillColor = "blue";
    }
}

// your test data
var responses = ["C04", "C04", "C09", "C21", "C24", "C26", "C43", "C46", "C46", "C66", "C68", "C21", "C09", "C21", "C21", "C21", "E10", "E11", "E13", "E14", "E20", "E20", "E22", "E26", "G10", "G10", "G10", "G10", "G10", "G10", "G10", "G10", "G23", "G38", "G38", "G60", "G60", "G60", "G10", "G10", "G10", "G60", "L15", "L30", "L30", "L30", "L31", "L32", "L32", "L35", "L55", "L55", "L72", "L95", "L30", "L30", "L55", "L30", ""];

// a new array to track the objects
var results = [];

// for every element in your response
for (var i = 0; i < responses.length; i++) {

    // see if there is an existing match
    var found = false;
    // loop over the existing results
    for( var j = 0; j < results.length; j++ ) {
        // if the current response matches an existing result, update the count
        if(results[j].name == responses[i]) {
            results[j].count++;
            updateColors(results[j]); //update the colors
            found = true; //set the flag to true, so we dont add this as a new result
            j = results.length; //exit the loop
        }
    }
    // if the response element wasnt matched, add it as a new result
    if(!found) {
        results.push({name: responses[i], count: 1, fillColor: 'red', fillOpacity: 0.25})
    }   
}

//print everything
console.log(results)

Example Output for 'results[2]'

count: 5
fillColor: "green"
fillOpacity: 0.25
name: "C21"

You can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/8tbmw2fg/

Hope that helps!

Adam Konieska
  • 2,805
  • 3
  • 14
  • 27
  • Thank you for this. I will try to implement this. Once i get something working i will accept it as the answer! Thanks again. – Gary Henshall Jun 23 '16 at 08:49