topic Re: How to Export Data Grid as a CSV file after query tasks? in ArcGIS JavaScript Maps SDK Questions

How to Export Data Grid as a CSV file after query tasks?

Rocky_ — Mon, 24 Sep 2018 18:00:41 GMT

Hi all.. i am trying to implement an function by which we can export query task result data grid as a CSV file.

Is there any widget available for this function. I am using 4.8 arcgis javascript .. any ideas or samples with latest versions..

Thanks..

Re: How to Export Data Grid as a CSV file after query tasks?

deleted-user--MMnVrog9xw_ — Sat, 11 Dec 2021 21:02:39 GMT

I'm not aware of an out-of-the-box solution but I wrote a function to export results from a query for a web map that I created.

It takes an array of strings ( i.e. ["field1, field2, field3", "field1, field2, field3"]) and an array of field names. It then puts that all into a CSV formatted string and encodes that as a URI and attaches that to a href element.

function exportData(featureArray, featureHeaders){
    // creates downloadable csv file of selected features

    document.getElementById("status").innerHTML = "Generating Download Link..."
    var csvContent = "data:text/csv;charset=utf-8,";
    csvContent += featureHeaders + "\r\n";
    for (x in featureArray){
        csvContent += featureArray[x] + "\r\n";
    }
    var encodedUri = encodeURI(csvContent);
    // the div where the link will be placed
    var searchDiv = document.getElementById("searchDiv");
    // Get link element or create it if it does not exist yet
    try{
        var link = document.getElementById("downloadLink")

        if (link == null){
            throw "nullException";
        }
    }catch (e){
        var link = document.createElement("a");
    }finally{
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "data.csv");
        link.setAttribute("id", "downloadLink");
        link.innerHTML= "Download Feature List";
        link.hidden = false;

        document.getElementById("status").innerHTML = "";
        searchDiv.appendChild(link);
    }
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to Export Data Grid as a CSV file after query tasks?

Rocky_ — Thu, 27 Sep 2018 14:49:48 GMT

Hello james.. it was really helpful but can you please give me an example by using this function..

Re: How to Export Data Grid as a CSV file after query tasks?

deleted-user--MMnVrog9xw_ — Sat, 11 Dec 2021 21:02:42 GMT

Sure. One thing I forgot that I forgot is that featureHeaders is not actually an array but a comma delimited string (you can just call the toString() method on the array). Also, featureArray is an array of strings not a 2d array (i'll edit my original response). Anyway, I'll take the example QueryTask from the API reference here and modify it to pass results to my exportData function:

require(["esri/tasks/QueryTask", "esri/tasks/support/Query"], function(QueryTask, Query){
  var citiesLayerUrl = " ... "; // Represents the REST endpoint for a layer of cities.
  var fields = ["cityName", "countryName", "POP"]; // Made up some fields
  var queryTask = new QueryTask({
    url: citiesLayerUrl
  });
  var query = new Query();
  query.returnGeometry = true;
  query.outFields = fields; // Use the array of fields from above
  query.where = "POP &gt; 1000000";  // Return all cities with a population greater than 1 million
  // When resolved, returns features and graphics that satisfy the query.
  queryTask.execute(query).then(function(results){
    console.log(results.features);
    var exportFields = [];
    var exportHeaders = fields.toString();
    var features = results.features;
    for (f in features){
        var row = "";
        for (i in targetLayer.fields){
            row += features[f].attributes[targetLayer.fields[i]]
            if (i !== (targetLayer.fields.length - 1)){
                row += ",";
            }
                            }
            exportFields.push(row);
        }
    exportData(exportFields, exportHeaders);
  });

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to Export Data Grid as a CSV file after query tasks?

Rocky_ — Fri, 28 Sep 2018 15:17:52 GMT

Hi James..Thanks for the reply. Here we are exporting results to CSV for only one URL and its features.. What can i do if i am having more than 2 featurem URLs with different fields.. How to use your same function..?

Re: How to Export Data Grid as a CSV file after query tasks?

deleted-user--MMnVrog9xw_ — Fri, 28 Sep 2018 16:51:04 GMT

That kind of depends on how your code is set up. You could actually move a lot of this code into the exportData function and just have the function accept a featureSet from the query results as well as the list of field names for the headers.

Re: How to Export Data Grid as a CSV file after query tasks?

Rocky_ — Fri, 28 Sep 2018 19:45:01 GMT

Thank you very much for replying answer to my question. I have to try this again specifically. Really appreciate your suggestions.

Best regards

Re: How to Export Data Grid as a CSV file after query tasks?

Rocky_ — Thu, 18 Oct 2018 21:11:17 GMT

Hi James, I am able to implement function for Exporting Result Grid table as CSV file.. but when am using this function all columns export instead of only selected columns by the user..

Can you please take a look..

function export_table_to_csv() {
var html = document.getElementById("gridTable").innerHTML;
var filename = "QueryResult.csv";
var csv = [];
var rows = document.querySelectorAll("table tr");

for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows.querySelectorAll("td, th");

for (var j = 0; j < cols.length; j++)
row.push(cols.innerText);

csv.push(row.join(","));
}

If you have any questions please feel free to ask.

Thank You

Re: How to Export Data Grid as a CSV file after query tasks?

deleted-user--MMnVrog9xw_ — Fri, 19 Oct 2018 14:51:22 GMT

How are you having them select the columns?

Re: How to Export Data Grid as a CSV file after query tasks?

Rocky_ — Fri, 19 Oct 2018 15:02:31 GMT

Its actually just show/hide function as below... I am using ColumnHider

Grid = new(declare([OnDemandGrid, Selection, ColumnHider]))({
bufferRows: Infinity,
columns: columns
}, "Grid");

By using this function user can just Check/ Uncheck particular columns...

Re: How to Export Data Grid as a CSV file after query tasks?

deleted-user--MMnVrog9xw_ — Fri, 19 Oct 2018 15:23:12 GMT

Oh okay, so your using a dgrid. I think you can actually just use enhanced grid to get this functionaily in your grid. Take a look at this thread.

I wasn't using any kind of data grid in the map that I wrote my export function for so it wasn't really designed with that in mind. You could still do it, you would just have to pass the selected columns as the exportHeaders argument.

Re: How to Export Data Grid as a CSV file after query tasks?

Rocky_ — Fri, 19 Oct 2018 15:34:15 GMT

James can you please share me how to do it.. I checked that thread but its just a exporting a data directly.. I am performing query tasks first in my code and then exporting that data result into csv file..