topic Re: Accessing XML data code in Web AppBuilder Custom Widgets Questions

Accessing XML data code

AlbertoCañivano — Sun, 12 Dec 2021 10:11:45 GMT

I´m working with this code: Access data (XML) | ArcGIS API for JavaScript 3.27 and I obtain de GET Request of the Spanish Cadastre Server

<?xml version="1.0" encoding="utf-8"?><consulta_coordenadas xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.catastro.meh.es/">
  <control>
    <cucoor>1</cucoor>
    <cuerr>0</cuerr>
  </control>
  <coordenadas>
    <coord>
      <pc>
        <pc1>41011A0</pc1>
        <pc2>0200584</pc2>
      </pc>
      <geo>
        <xcen>-5.54542610726449</xcen>
        <ycen>37.2725211862905</ycen>
        <srs>EPSG:4326</srs>
      </geo>
      <ldt>Polígono 2 Parcela 584 BACIALJOFAR. ARAHAL (SEVILLA)</ldt>
    </coord>
  </coordenadas>
</consulta_coordenadas>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

My next goal is obtain the values of the <geo> node: <xcen> and <ycen>; after that I would like to collect those values and display them in a map with a ZoomTo widget.

My problem is I can´t access to the nodes that I want.

I´m using dojox/xml parser for it

dom.byId("x").value = xmlParser.textContent(response.childNodes[0]);‍‍

Is it possible to get these values with only esri/ request or I need to use dojo/xml for querying the request?

How can I access to Xcen and Ycen values?

Here the complete code:

<!DOCTYPE html>
<html>
<head>
  <title>XML Content</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/3.27/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.27/"></script>
  <script>
    require([
      "dojo/dom",
      "dojo/on",
      "dojo/dom-class",
      "dojo/_base/json",
      "dojox/xml/parser",
      "esri/config", 
      "esri/request",
      "dojo/query",
      "dojo/domReady!"
    ], function(dom, on, domClass, dojoJson, xmlParser, esriConfig, esriRequest, query) {

      // Use CORS
      //esriConfig.defaults.io.corsEnabledServers.push("ovc.catastro.meh.es"); // supports CORS

      // Use proxy if the server doesn't support CORS
       esriConfig.defaults.io.proxyUrl = "PHP/proxy.php?";

       var RC = "8948011VL6084N"
      dom.byId("url").value = "https://ovc.catastro.meh.es/ovcservweb/OVCSWLocalizacionRC/OVCCoordenadas.asmx/Consulta_CPMRC?Provincia=&Municipio=&SRS=EPSG%3A4326&RC=" + RC;
      dom.byId("content").value = "";
      dom.byId("RC").value = RC
      //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
        var url = dom.byId("url").value;

        var requestHandle = esriRequest({
          "url": url,
          "handleAs": "xml"
        });
        requestHandle.then(requestSucceeded, requestFailed);
      }

      function requestSucceeded(response, io){
        dom.byId("status").innerHTML = "";
        dojoJson.toJsonIndentStr = "  ";
        dom.byId("content").value = xmlParser.innerXML(response);
        dom.byId("x").value = xmlParser.textContent(response.childNodes[0]);
      }
      function requestFailed(error, io){
        domClass.add(dom.byId("content"), "failure");
        dom.byId("status").innerHTML = "";

        dojoJson.toJsonIndentStr = " ";
        dom.byId("content").value = dojoJson.toJson(error, true);
      }

    });
  </script>
</head>
<body>
  <p>Download <b>XML</b> content using esriRequest. </p>
  <p>
    <input type="text" disabled="true" id="RC" size="50"/><br>
    Coordenada X:     <input type="text" disabled="true" id="x" size="50"/><br>
    Coordenada Y:     <input type="text" disabled="true" id="y" size="50"/><br>
    <input type="text" disabled="true" id="url" size="100"/>
    <input id="submitRequest" type="button" value="GO" />
    <span id="status"></span>
  </p>
  <h2>Content</h2>
  <textarea id="content"></textarea>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks for your help!

Re: Accessing XML data code

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:11:48 GMT

Alberto,

Make these changes to your code:

     function requestSucceeded(response, io){
        dom.byId("status").innerHTML = "";
        dojoJson.toJsonIndentStr = "  ";
        dom.byId("content").value = xmlParser.innerXML(response);

        var xcen = response.getElementsByTagName('xcen');
        var ycen = response.getElementsByTagName('ycen');
        dom.byId("x").value = xmlParser.textContent(xcen[0]);
        dom.byId("y").value = xmlParser.textContent(ycen[0]);
      }‍‍‍‍‍‍‍‍‍‍

Re: Accessing XML data code

AlbertoCañivano — Mon, 14 Jan 2019 07:41:27 GMT

It works Richard!

Thanks a lot!!

Re: Accessing XML data code

RobertScheitlin__GISP — Mon, 14 Jan 2019 13:46:11 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: Accessing XML data code

AlbertoCañivano — Sun, 12 Dec 2021 10:11:51 GMT

Hi!

I have this code

define([
  'dojo/_base/declare',
  'jimu/BaseWidget',
  "dojox/xml/parser",
  'dojo/dom',
  'dojo/on',
  "esri/request",  
  "esri/graphic",
  "esri/symbols/SimpleMarkerSymbol",
  'esri/geometry/Point',
  "esri/Color",
  "esri/SpatialReference"
  
],
function(
  declare, BaseWidget, xmlParser, dom,  on,esriRequest,Graphic,SimpleMarkerSymbol,Point,Color,SpatialReference) {
  return declare([BaseWidget], {
     baseClass: 'jimu-widget-zoomTo',
     symbol: null,
     
    postCreate: function() {
      this.inherited(arguments);
      this.symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,null,new Color("blue"));
      console.log("postCreate creado!")
    },

        
    onZoomClick: function(){
      var RC = dom.byId("RC").value;
      
      //var url = "https://ovc.catastro.meh.es/ovcservweb/OVCSWLocalizacionRC/OVCCoordenadas.asmx/Consulta_CPMRC?Provincia=&Municipio=&SRS=4326&RC=" + RC
      var url = "https://ovc.catastro.meh.es/ovcservweb/OVCSWLocalizacionRC/OVCCoordenadas.asmx/Consulta_CPMRC?Provincia=&Municipio=&SRS=EPSG%3A4326&RC=" + RC      
      console.log(url);
      
      var requestHandle = esriRequest({
          "url": url,
          "handleAs": "xml"
        });
      requestHandle.then(function(response){
              
        dom.byId("x").value = xmlParser.innerXML(response);
        var xcen = response.getElementsByTagName('xcen');
        dom.byId("x").value = xmlParser.textContent(xcen[0]);

        dom.byId("y").value = xmlParser.innerXML(response);
        var ycen = response.getElementsByTagName('ycen');
        dom.byId("y").value = xmlParser.textContent(ycen[0]);
        var RC = dom.byId("RC").value;
      
      
      });

      var coordY = dom.byId("y");
      var coordX = dom.byId("x");
      var level = 100;
      var punto = new Point(coordX.value,coordY.value,new SpatialReference({ wkid: 4326 }));
      var graphic = new Graphic(punto,this.symbol)
      //var punto = new Point(coordX.value,coordY.value,this.map.spatialReference); 
      this.map.centerAndZoom(punto,level.value);
    },

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

I managed to get the X and Y coordinates out of the XML file, like Robert told me. Now with these coordinates I want to zoom and center, as well as draw a point. The problem is that Zoom and center isn't working and I don't know why. Could there be any problem of context functions? I don't know if I'm accessing the map well (this.map).
Thank you

Re: Accessing XML data code

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:11:54 GMT

Alberto,

No you have a scope issue. Since you are now trying to do this in a widget you need to use lang.hitch to maintain the scope of "this".

onZoomClick: function(){
  var RC = dom.byId("RC").value;
  var url = "https://ovc.catastro.meh.es/ovcservweb/OVCSWLocalizacionRC/OVCCoordenadas.asmx/Consulta_CPMRC?Provincia=&Municipio=&SRS=EPSG%3A4326&RC=" + RC      
  console.log(url);
      
  var requestHandle = esriRequest({
    "url": url,
    "handleAs": "xml"
  });
  requestHandle.then(lang.hitch(this, function(response){
    var xcen = response.getElementsByTagName('xcen');
    dom.byId("x").value = xmlParser.textContent(xcen[0]);

    var ycen = response.getElementsByTagName('ycen');
    dom.byId("y").value = xmlParser.textContent(ycen[0]);
    var coordY = dom.byId("y");
    var coordX = dom.byId("x");
    var punto = new Point(coordX.value, coordY.value, new SpatialReference({wkid:4326}));
    var geom = webMercatorUtils.geographicToWebMercator(punto); // project the point to webmercator since that is what esri basmaps are
    var graphic = new Graphic(geom, this.symbol) 
    this.map.centerAndZoom(punto, 12); //esri basemaps are tiled so the level is a value like 12 Not 100
  }));
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Accessing XML data code

AlbertoCañivano — Fri, 18 Jan 2019 16:34:09 GMT

It works perfectly Robert!
The last question: I generated the point and then cleaned it when I close the widget (onClose). However, I would also like to clean the information that is asked of the user when he opens the widget (var RC) and I do not know what method I have to use to do it.
Thank you again.

Re: Accessing XML data code

RobertScheitlin__GISP — Fri, 18 Jan 2019 17:09:43 GMT

in your widgets onOpen method just set the html elements innerHTML to ""