JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Get ArcGIS Server Map Service Layer Field Names</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
  <style>
    body{
      font-family: "Arial Unicode MS, Arial, sans-serif";
    }
    #content {
      width: 800px; height: 350px; padding: 5px; overflow: auto;
      border: solid 2px #AAAAAA; background-color: #FFFFFF;
      -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
      -moz-box-shadow: 0 0 0.5em black; -webkit-box-shadow: 0 0 0.5em black; -o-box-shadow: 0 0 0.5em black; box-shadow: 0 0 0.5em black;
    }
    .failure { color: red; }
    #status { font-size: 12px; }
  </style>
  
  <script src="https://js.arcgis.com/3.16/"></script>
  <script>
    require(["dojo/dom", "dojo/on", "dojo/dom-class", "dojo/_base/json", "dojo/_base/array", "dojo/string", "esri/request", "dojo/domReady!"], function(dom, on, domClass, dojoJson, array, dojoString, esriRequest) {

        dom.byId("url").value = "https://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/Geology/MapServer/3";
        dom.byId("content").value = "";
        //handle the Go button's click event
        on(dom.byId("submitRequest"), "click", getContent);


        function getContent(){

          var contentDiv = dom.byId("content");
          contentDiv.value = "";
          domClass.remove(contentDiv, "failure");
          dom.byId("status").innerHTML = "Downloading...";

          //get the url and setup a proxy 
          var url = dom.byId("url").value;

          if(url.length === 0){
            alert("Please enter a URL");
            return;
          }

          var requestHandle = esriRequest({
            "url": url,
            "content": {
              "f": "json"
            },
            "callbackParamName": "callback"
          });
          requestHandle.then(requestSucceeded,...