2

I have created a GeoJSON list and am trying to export it to file via a button in the webpage. Everything works fine except that the file that is exported only displays 'undefined' and none of the GeoJSON data. What am I doing wrong?

HTML:

  <button onclick="exportToJsonFile()">Download GeoJSON</button>

Script:

 var api = $.getJSON("https://api.data.gov.sg/v1/environment/rainfall?date=2019-07-03",
   function rainfall(data_rainfall){
   apiGeo = { type: "FeatureCollection", features: []};
             //---- apiGeo is populated here ----//

  console.log(apiGeo);     //displays data in GeoJSON format in browser console
});

function exportToJsonFile(apiGeo) {
let dataStr = JSON.stringify(apiGeo);
let dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);

let exportFileDefaultName = 'data.json';

let linkElement = document.createElement('a');
linkElement.setAttribute('href', dataUri);
linkElement.setAttribute('download', exportFileDefaultName);
linkElement.click();
} 
abdillah
  • 61
  • 3

1 Answers1

0

Takes some time to load data (even this shorter json version, button name is changed to full after load). But works even in snippet. Problem was unused function parameter and then when data was not loaded.

function loadData() {
  var api = $.getJSON("https://api.data.gov.sg/v1/environment/rainfall",
    function rainfall(data_rainfall) {
      apiGeo = { type: "FeatureCollection", features: [], input: api.responseJSON };
      //---- apiGeo is populated here ----//

      console.log(apiGeo);     //displays data in GeoJSON format in browser console
      document.body.getElementsByTagName("BUTTON")[0].innerText += " GeoJSON";
    });
}
function exportToJsonFile() {
  downloadObjectAsJson(apiGeo, "data");
}
function downloadObjectAsJson(exportObj, exportName) {
  if (navigator.msSaveBlob) { // IE10+
    var blob = new Blob([JSON.stringify(exportObj)], {type : 'application/json'});
    return navigator.msSaveBlob(blob, exportName + ".json");
  }
  var dataStr = "data:application/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
  var downloadAnchorNode = document.createElement('a');
  downloadAnchorNode.setAttribute("href", dataStr);
  downloadAnchorNode.setAttribute("download", exportName + ".json");
  downloadAnchorNode.innerText = exportName;
  document.body.appendChild(downloadAnchorNode); // required for firefox
  downloadAnchorNode.click();
  downloadAnchorNode.remove();
}
loadData()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="exportToJsonFile()">Download</button>
Jan
  • 2,178
  • 3
  • 14
  • 26
  • You can accept answer under voting buttons in case you are happy with... – Jan Jul 08 '19 at 09:44
  • Maybe even better info here https://stackoverflow.com/questions/34156282/how-do-i-save-json-to-local-text-file – Jan Jul 09 '19 at 12:26