Iterate through appended json file

Question

I have this code:

function heatMapRange() {
  var script1 = document.createElement('script');
  script1.src = 'allCoords.js';
  document.getElementsByTagName('head')[0].appendChild(script1);
}

which appends the allCoords.js file above:

allCoords_callback({
  "coordinates": [
    [50.1729677, 12.6692243, 580000],
    [50.001168, 14.4270033, 2895000],
    [50.6988037, 13.9384015, 945000],
    [50.1218161, 14.4824004, 409900],
    [49.470061, 17.0937597, 1499000],
    [49.8509959, 18.5593087, 380000]
  ]
});

What I want is to iterate through this data with something like this:

function allCoords_callback(results1) {
  for (var i = 0; i < results1.coordinates.length; i++) {
    alert(results1.coordinates[i]);
  }
}

Is it possible?

Answer 1

You can iterate an array in javascript with Array.map() .

In your example will be something like:

results1.coordinates.map(function(coordinate) { alert(coordinate); })

That's about iterating part.

Then, another topic is how do you get JSON you need to process. In the example given on Google Maps docs they do it using JSONP just because that is the way the real-time earthquake data works . Another method to fetch data are XMLHttpRequests (AKA as AJAX). This is a more common practice and I would recomend using it if possible.

In your case I would re-write your code to look something like this:

function heatMapRange(){
  var request = new XMLHttpRequest();
  request.open('GET', '/allCoords.js', true);
  request.onload = function () {
    if (request.status >= 200 && request.status < 400) {
      // Success!
      var data = JSON.parse(request.responseText);
      // process the data in the response, like
      // iterating through the list of coordinates
      data.coordinates.map(function(coordinate) { alert(coordinate); })
    } else {
      // We reached our target server, but it returned an error
    }
  }
  request.error = function () {
    // There was a connection error of some sort
  }
  request.send();
}

Which fetch the data from the JSON file allCoords.json :

{
    "coordinates": [
        [50.1729677,12.6692243,580000],
        [50.001168,14.4270033,2895000],
        [50.6988037,13.9384015,945000],
        [50.1218161,14.4824004,409900],
        [49.470061,17.0937597,1499000],
        [49.8509959,18.5593087,380000]
    ]
}

This way of fetching data from a server align more with the best practices used in the industry. This is just the straight forward example using vanillaJS XMLHttpRequest. There are tons of libraries that simplify this action. Even better there is Fetch API coming tackling the topic of fetching resources.

Answer 2

Well the code on the top works, problem was that I disabled the alerts in google chrome. So closing the tab and reopening page did the trick.