nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

List ArcGIS Server folders with ESRI request

AlexGole

Hi all, I am trying to build this application that lists all web services within each ArcGIS Server folders. I am trying to programmatically feed a drop down list with ArcGIS Server folder's names so the user just has to select the folder of his choice and it returns all services in a table. The following code works great but I had to manually enter each folder:

<!DOCTYPE html>
<html>
<head>
    <title>Service Info</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
    <style>
        html, body, #details {
            padding: 0;
            margin: 0;
            height: 100%;
        }


        .dgrid-cell-padding {
            padding: 10px !important;
        }
        .dgrid {
            height: 100% !important;
        }
        .dgrid-cell{
            border:1px solid black !important;
        }
    </style>


    <script src="http://js.arcgis.com/3.14/"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script>
        require([
          "esri/request",
          "dojo/_base/array",
          "dojo/dom",
          "dojo/domReady!"
        ], function (esriRequest, array, dom, Grid) {


            $(document).ready(function () {
                var baseUrl = "http://webgisdevint1/arcgis/rest/services";
                $('.selectpicker').on('change', function(){
                    var baseFolder = $(this).find("option:selected").val();


         






                esriRequest({
                url: baseUrl + "/" + baseFolder,
                content: {
                    "f": "json"
                },
                callbackParamName: "callback"
            }).then(function (response) {
                var data = array.map(response.services, function (service, index) {
                    return {
                        "url": "<a target='_blank' href='" + baseUrl + "/" + service.name + "/" + service.type + "'>" + baseUrl + "/" + service.name + "/" + service.type + "</a><br>",
                        "name": service.name,
                        "type": service.type,
                        "id": index
                    }
                });
                $('#example').DataTable({
                    destroy: true,
                    data: data,
                    columns: [
                        { title:"URL", data: "url" },
                        { title: "Name", data: "name" },
                        { title: "Type", data: "type" }
                    ]
                });
            });
        });
            });


        });
    </script>


</head>
<body class="claro">
    <select class="selectpicker">
        <option>Search web GIS Folders:</option>
        <option>Alex_Try</option>
        <option>CalMAPPER</option>
        <option>davin</option>
        <option>ForestPractice</option>
        <option>FRAP</option>
        <option>Pipeline</option>
        <option>PPFIS</option>
        <option>ResourceMgmt</option>
        <option>System</option>
        <option>testing</option>
        <option>Utilities</option>
        <option>WatershedMapper</option>
    </select> 


    <table id="example" class="display" width="100%"></table>
</body>
</html>

Any idea is more than welcome,

Thanks,

Alex

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Alex,

See if this is what you were after ( I select the first option in the selectby default):

<!DOCTYPE html>
<html>

<head>
  <title>Service Info</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
  <style>
    html,
    body,
    #details {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    .dgrid-cell-padding {
      padding: 10px !important;
    }

    .dgrid {
      height: 100% !important;
    }

    .dgrid-cell {
      border: 1px solid black !important;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script>
    require([
          "esri/request",
          "dojo/_base/array",
          "dojo/dom",
          "dojo/domReady!"
        ], function (esriRequest, array, dom) {

      $(document).ready(function () {
        var baseUrl = "http://gislap183/arcgis/rest/services";
        esriRequest({
          url: baseUrl + "/",
          content: {
            "f": "json"
          }
        }).then(function( response ){
          $.each(response.folders, function (index, value) {
            $('.selectpicker').append($('<option>', {
              value: value,
              text: value
            }));
          });
          $(".selectpicker").val($(".selectpicker option:first").val()).change();
        });


        $('.selectpicker').on('change', function () {
          var baseFolder = $(this).find("option:selected").val();

          esriRequest({
            url: baseUrl + "/" + baseFolder,
            content: {
              "f": "json"
            },
            callbackParamName: "callback"
          }).then(function (response) {
            var data = array.map(response.services, function (layer, index) {
              return {
                "url": "<a target='_blank' href='" + baseUrl + "/" + baseFolder + "/" + layer.name + "'>" +
                baseUrl + "/" + baseFolder + "/" + layer.name + "/</a><br>",
                "name": layer.name,
                "id": index
              }
            });
            $('#example').DataTable({
              destroy: true,
              data: data,
              columns: [
                {
                  title: "URL",
                  data: "url"
                },
                {
                  title: "Name",
                  data: "name"
                }
              ]
            });
          });
        });
      });

    });
  </script>

</head>

<body class="claro">
  <select class="selectpicker" prompt="Search web GIS Folders:">
  </select>

  <table id="example" class="display" width="100%"></table>
  <table id="layers" class="display" width="100%"></table>
</body>

</html>

All comments

AlexGole

That was it thank you Robert!It works great!

RobertScheitlin__GISP

Alex,

The problem is the lack of a specified callback on the first esriRequest.

The mixture of https and http urls does not help either (line 10 and 35 was https) line 35 did not specify a protocol at all. Line 51 and 52 added.

<!DOCTYPE html>
<html>

<head>
  <title>Service Info</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <link rel="stylesheet" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
  <style>
    html,
    body,
    #details {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    .dgrid-cell-padding {
      padding: 10px !important;
    }

    .dgrid {
      height: 100% !important;
    }

    .dgrid-cell {
      border: 1px solid black !important;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script>
    require([
          "esri/request",
          "dojo/_base/array",
          "dojo/dom",
          "dojo/domReady!"
        ], function (esriRequest, array, dom) {

      $(document).ready(function () {
        var baseUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services";
        esriRequest({
          url: baseUrl + "/",
          content: {
            "f": "json"
          },
          handleAs: "json",
          callbackParamName: "callback"
        }).then(function( response ){
          $.each(response.folders, function (index, value) {
            $('.selectpicker').append($('<option>', {
              value: value,
              text: value
            }));
          });
          $(".selectpicker").val($(".selectpicker option:first").val()).change();
        });


        $('.selectpicker').on('change', function () {
          var baseFolder = $(this).find("option:selected").val();

          esriRequest({
            url: baseUrl + "/" + baseFolder,
            content: {
              "f": "json"
            },
            handleAs: "json",
            callbackParamName: "callback"
          }).then(function (response) {
            var data = array.map(response.services, function (layer, index) {
              return {
                "url": "<a target='_blank' href='" + baseUrl + "/" + baseFolder + "/" + layer.name + "'>" +
                baseUrl + "/" + baseFolder + "/" + layer.name + "/</a><br>",
                "name": layer.name,
                "id": index
              }
            });
            $('#example').DataTable({
              destroy: true,
              data: data,
              columns: [
                {
                  title: "URL",
                  data: "url"
                },
                {
                  title: "Name",
                  data: "name"
                }
              ]
            });
          });
        });
      });

    });
  </script>

</head>

<body class="claro">
  <select class="selectpicker" prompt="Search web GIS Folders:">
  </select>

  <table id="example" class="display" width="100%"></table>
  <table id="layers" class="display" width="100%"></table>
</body>

</html>

AlexGole

As you can see on JSbin, I am experiencing about the same problem: https://jsbin.com/zomerizeme/edit?html,output

AlexGole

I am actually running it from my localhost on my IIS7.5 (in domain registered computer). And using my own Server's URL. Any idea?

RobertScheitlin__GISP

Alex,

I am actually NOT a jQuery fan. Why use a third part library when there is nothing that you can do in jQuery that I have not been able to do using dojo which is already part of the JS API.

The reason you get that behavior is because you are running from the file system and not an actual URL if I use my code just type my machines url "http://gislap183/js/ServerFolder.html vs. file:///C:/JS_Workspace/ServerFolder.html then it works fine.

Don't forget to mark this thread as answered.

AlexGole

Looking at your script seems like that is exactly what I am after. (Pretty impressed by your JQuery skills by the way - i am trying to learn some) .The only thing I don't understand here is that I get a blank page just like your previous script. Is there a reason I would need a proxy? I do not have any locked services.

Thanks, Alex

RobertScheitlin__GISP

Alex,

See if this is what you were after ( I select the first option in the selectby default):

<!DOCTYPE html>
<html>

<head>
  <title>Service Info</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
  <style>
    html,
    body,
    #details {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    .dgrid-cell-padding {
      padding: 10px !important;
    }

    .dgrid {
      height: 100% !important;
    }

    .dgrid-cell {
      border: 1px solid black !important;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script>
    require([
          "esri/request",
          "dojo/_base/array",
          "dojo/dom",
          "dojo/domReady!"
        ], function (esriRequest, array, dom) {

      $(document).ready(function () {
        var baseUrl = "http://gislap183/arcgis/rest/services";
        esriRequest({
          url: baseUrl + "/",
          content: {
            "f": "json"
          }
        }).then(function( response ){
          $.each(response.folders, function (index, value) {
            $('.selectpicker').append($('<option>', {
              value: value,
              text: value
            }));
          });
          $(".selectpicker").val($(".selectpicker option:first").val()).change();
        });


        $('.selectpicker').on('change', function () {
          var baseFolder = $(this).find("option:selected").val();

          esriRequest({
            url: baseUrl + "/" + baseFolder,
            content: {
              "f": "json"
            },
            callbackParamName: "callback"
          }).then(function (response) {
            var data = array.map(response.services, function (layer, index) {
              return {
                "url": "<a target='_blank' href='" + baseUrl + "/" + baseFolder + "/" + layer.name + "'>" +
                baseUrl + "/" + baseFolder + "/" + layer.name + "/</a><br>",
                "name": layer.name,
                "id": index
              }
            });
            $('#example').DataTable({
              destroy: true,
              data: data,
              columns: [
                {
                  title: "URL",
                  data: "url"
                },
                {
                  title: "Name",
                  data: "name"
                }
              ]
            });
          });
        });
      });

    });
  </script>

</head>

<body class="claro">
  <select class="selectpicker" prompt="Search web GIS Folders:">
  </select>

  <table id="example" class="display" width="100%"></table>
  <table id="layers" class="display" width="100%"></table>
</body>

</html>

AlexGole

Thanks Robert ! That looks like a great script but I was trying to populate the select picker with the REST endpoint folders so the user can select the folder of his choice and populate a table with all the services from the folder of chosen by the user (dropdown). Layers might be an addition I would consider in the future though. Also, when I run your script, I get that I need a proxy... Not too sure why as our data is all unlocked (not secured) as it is behind the firewall. Thanks, Alex

RobertScheitlin__GISP

Alex,

I am not real sure the direction you were going here but I have fixed the code to dynamically populate the select. I made the select change event populate a new table listing the layers for that service.

<!DOCTYPE html>
<html>

<head>
  <title>Service Info</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
  <style>
    html,
    body,
    #details {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    .dgrid-cell-padding {
      padding: 10px !important;
    }

    .dgrid {
      height: 100% !important;
    }

    .dgrid-cell {
      border: 1px solid black !important;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script>
    require([
          "esri/request",
          "dojo/_base/array",
          "dojo/dom",
          "dojo/domReady!"
        ], function (esriRequest, array, dom) {

      $(document).ready(function () {
        var baseUrl = "http://webgisdevint1/arcgis/rest/services";
        esriRequest({
          url: baseUrl + "/",
          content: {
            "f": "json"
          }
        }).then(function( response ){
          $.each(response.services, function (index, value) {
            $('.selectpicker').append($('<option>', {
              value: value.name + "/" + value.type,
              text: value.name
            }));

            var data = array.map(response.services, function (service, index) {
              return {
                "url": "<a target='_blank' href='" + baseUrl + "/" + service.name + "/" + service.type + "'>" + baseUrl + "/" + service.name + "/" + service.type + "</a><br>",
                "name": service.name,
                "type": service.type,
                "id": index
              }
            });
            $('#example').DataTable({
              destroy: true,
              data: data,
              columns: [
                {
                  title: "URL",
                  data: "url"
                },
                {
                  title: "Name",
                  data: "name"
                },
                {
                  title: "Type",
                  data: "type"
                }
              ]
            });

          });
        });


        $('.selectpicker').on('change', function () {
          var baseFolder = $(this).find("option:selected").val();

          esriRequest({
            url: baseUrl + "/" + baseFolder,
            content: {
              "f": "json"
            },
            callbackParamName: "callback"
          }).then(function (response) {
            var data = array.map(response.layers, function (layer, index) {
              return {
                "url": "<a target='_blank' href='" + baseUrl + "/" + baseFolder + "/" + layer.name + "'>" +
                baseUrl + "/" + baseFolder + "/" + layer.name + "/</a><br>",
                "name": layer.name,
                "id": index
              }
            });
            $('#layers').DataTable({
              destroy: true,
              data: data,
              columns: [
                {
                  title: "URL",
                  data: "url"
                },
                {
                  title: "Name",
                  data: "name"
                }
              ]
            });
          });
        });
      });

    });
  </script>

</head>

<body class="claro">
  <select class="selectpicker" prompt="Search web GIS Folders:">
  </select>

  <table id="example" class="display" width="100%"></table>
  <table id="layers" class="display" width="100%"></table>
</body>

</html>

AlexGole

You can find my code here: https://jsbin.com/sizufoxero/edit?html,output

image.png

RobertScheitlin__GISP

Alex,

What does your code look like for getting the ArcGIS Server folder names and adding them to the drop down list? For adding code in a thread click on the Use advanced editor link in the upper right hand corner of a reply (you will not see it if you are looking at the thread in your inbox), then choose the >> button from the toolbar.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.