Geocoding String variable

jaykapalczynski · ‎02-27-2020

If I make a call like this in JS how to I capture the result IN JS and parse through it and set variables for the Match_addr and X and Y

findAddressCandidates—ArcGIS REST API: World Geocoding Service | ArcGIS for Developers

http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=380%20New%20York%20Street%2C%20Redlands%2C%20CA%2092373&category=&outFields=*&forStorage=false&f=pjson‍‍‍‍

RobertScheitlin__GISP · ‎02-27-2020

Jay,

You would use the esriRequest class for this.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Request data from a remote server - 4.6</title>

  <style>
    html,
    body,
    #viewDiv {
      font-family: sans-serif;
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .container {
      padding: 1em;
    }

    input {
      width: 75%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>

  <script>
    require([
      "esri/request",
      "dojo/on",
      "esri/config",
      "dojo/domReady!"
    ], function(
      esriRequest,
      on,
      esriConfig
    ) {
      esriConfig.request.proxyUrl = 'proxy/proxy.ashx';
      var resultsDiv = document.getElementById("resultsDiv");
      var input = document.getElementById("inputUrl");

      /************************************************
       *
       * Define the 'options' for our request.
       *
       *************************************************/
      var options = {
        query: {
          SingleLine: input.value,
          outFields: "*",
          forStorage: false,
          f: 'pjson'
        },
        responseType: 'json'
      };

      // Make the request on a button click using the
      // value of the 'input' text.
      on(btnQuery, "click", function() {
        var url = 'http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates';
        esriRequest(url, options).then(function(response) {
          console.log('response', response);
          var responseJSON = JSON.stringify(response, null, 2);
          resultsDiv.innerHTML = responseJSON;
        });
      });
    });
  </script>
</head>

<body>
  <div class="container">
    <div>
      <h2>Using esri/request</h2>
      <button id="btnQuery">Make Request</button>
      <input id="inputUrl" type="text" value="380 New York St, Redlands, California, 92373">
    </div>
    <pre id="resultsDiv"></pre>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎02-27-2020

Jay,

You would use the esriRequest class for this.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Request data from a remote server - 4.6</title>

  <style>
    html,
    body,
    #viewDiv {
      font-family: sans-serif;
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .container {
      padding: 1em;
    }

    input {
      width: 75%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>

  <script>
    require([
      "esri/request",
      "dojo/on",
      "esri/config",
      "dojo/domReady!"
    ], function(
      esriRequest,
      on,
      esriConfig
    ) {
      esriConfig.request.proxyUrl = 'proxy/proxy.ashx';
      var resultsDiv = document.getElementById("resultsDiv");
      var input = document.getElementById("inputUrl");

      /************************************************
       *
       * Define the 'options' for our request.
       *
       *************************************************/
      var options = {
        query: {
          SingleLine: input.value,
          outFields: "*",
          forStorage: false,
          f: 'pjson'
        },
        responseType: 'json'
      };

      // Make the request on a button click using the
      // value of the 'input' text.
      on(btnQuery, "click", function() {
        var url = 'http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates';
        esriRequest(url, options).then(function(response) {
          console.log('response', response);
          var responseJSON = JSON.stringify(response, null, 2);
          resultsDiv.innerHTML = responseJSON;
        });
      });
    });
  </script>
</head>

<body>
  <div class="container">
    <div>
      <h2>Using esri/request</h2>
      <button id="btnQuery">Make Request</button>
      <input id="inputUrl" type="text" value="380 New York St, Redlands, California, 92373">
    </div>
    <pre id="resultsDiv"></pre>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

jaykapalczynski · ‎02-28-2020

Fantastic....had to modify your code a bit, placing the var options= {} inside the click event in order to get it to read my input box contained the address to geocode... just a different workflow as I am not defaulting my address

THANK YOU FOR YOUR INSIGHT AND HELP.....very appreciated.

/* SNIP */

<div>

   <h2>Using esri/request</h2>
      
   <button class="button" id="btnQuery1" onclick="myFunction_Geocode()" >Populate Address</button>      
   <input id="inputUrl" name="esrirequest" type="text" value="" >      
   <input id="esriresult" name="esriresult" type="text" >
   <button class="button" id="btnQuery2">Make Request</button>   
</div>

<pre id="resultsDiv" class="resultsdivgeocode"></pre>

/* SNIP */‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

// SNIP 

        esriConfig.request.proxyUrl = 'proxy/proxy.ashx';
        var resultsDiv = document.getElementById("resultsDiv");
        var input = document.getElementById("inputUrl");


        // Make the request on a button click using the value of the 'inputUrl' text.
        on(btnQuery2, "click", function () {

            var requestinputvalue = input.value;

            var options = {
                query: {
                    SingleLine: requestinputvalue,
                    outFields: "*",
                    forStorage: false,
                    f: 'pjson'
                },
                responseType: 'json'
            };

            alert(JSON.stringify(options));

            
            var url = 'http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates';
            esriRequest(url, options).then(function (response) {

                // ALERT COMPLETE JSON RESPONCE FOR GEOCODING
                console.log('response', response);
                alert(JSON.stringify(response));
                // ADDRESS
                var address = response.data.candidates[0].address;
                // X COORDINATE
                var vXCoord = JSON.stringify(response.data.candidates[0].location.x);
                // Y COORDINATE
                var vYCoord = JSON.stringify(response.data.candidates[0].location.y);

                // RETURN COMPLETE JSON FILE WITH GEOCODIN RESULTS
                var responseJSON = JSON.stringify(response, null, 2);
                resultsDiv.innerHTML = responseJSON;

                // CREATE ARRAY FROM ADDRESS AND SPLIT INTO VARIABLES
                var array = address.split(',', 4);
                var array0 = (array[0]);
                var array1 = (array[1]);
                var array2 = (array[2]);
                var array3 = parseInt(array[3]);

                // UPDATE WEB PAGE INPUT BOXES
                document.getElementsByName('idstreet')[0].value = (array0);
                document.getElementsByName('idcity')[0].value = (array1);
                document.getElementsByName('idstate')[0].value = (array2);
                document.getElementsByName('idzip')[0].value = (array3);
                document.getElementsByName('idx')[0].value = vXCoord;
                document.getElementsByName('idy')[0].value = vYCoord;


            });
            
        });

// SNIP
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍