JS API version upgrade issue on hitTest()

victhomas · ‎12-26-2021

Hello all, I came across an issue when I recently upgrade to v4.22 from v4.12 .

In v4.12 when I click on a point I was able to console.log out the information/attributes of all the fields. But since upgrade to v4.22, the console.log only output 1 field and that is the ID field, other fields did not get printed out. Not sure what have changed in the API that causes my problem, thanks in advance for any help.

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Graphic HitTest</title>
<style>
	 #mapViewDiv {
		padding: 0;
		margin: 0;
		height: 100%;
		width: 100%; 
	  }   
</style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/css/main.css"> 
	<script src="https://js.arcgis.com/4.22/"></script>
    <script>
	require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
	  "esri/layers/FeatureLayer",
	  "esri/geometry/Point"
    ], function(Map, MapView, Graphic, GraphicsLayer, FeatureLayer, Point) {

		let graphicArray = [];
		let featureLayer;

		let simpleRenderer = {
			type: "simple",
			symbol: {
				type: "simple-marker",
				style: "circle",
				color: [226, 119, 240], 
				outline: {
					color: [0, 0, 0],
					width: 1
				}
			}
		};
		
		let map = new Map({
			basemap: "gray-vector"
		});
		
		let view = new MapView({
			container: "mapViewDiv",  
			map: map,
			center: [-90.674, 36.729],
			zoom: 10
		});
		
		let ptData = [{"id":0,"lat": "36.7239","long":"-90.67514"},
						{"id":1,"lat": "36.72839","long":"-90.6764"},
						{"id":2,"lat": "36.74339","long":"-90.6674"},
						{"id":3,"lat": "36.79336","long":"-90.62574"},
						{"id":4,"lat": "36.72739","long":"-90.674"},
						{"id":5,"lat": "36.78639","long":"-90.6654"},
						{"id":6,"lat": "36.72366","long":"-90.6734"},
						{"id":7,"lat": "36.76369","long":"-90.6644"},
						{"id":8,"lat": "36.7276","long":"-90.6784"},
						{"id":9,"lat": "36.7238","long":"-90.6714"},
						{"id":10,"lat": "36.7233","long":"-90.6574"}];
		

		view.when().then(function(){
			for(let i = 0; i< ptData.length; i++){
				let point = {
					type: "point",
					longitude: ptData[i].long,
					latitude: ptData[i].lat
				};
				
				let pointGraphic = new Graphic({
					geometry: point,
					attributes: {
						"id": ptData[i].id,
						"latCoord": ptData[i].lat,
						"longCoord": ptData[i].long,
					},
					symbol: simpleRenderer.symbol
				});
				graphicArray.push(pointGraphic);
			}
			featureLayer = new FeatureLayer({
				fields: [{name: "id",alias: "id",type: "oid"},
						{name: "latCoord",alias: "latCoord",type: "string"},
						{name: "longCoord",alias: "longCoord",type: "string"}],
				objectIdField: "id",
				geometryType: "point",
				spatialReference: { wkid: 4326 },
				source: graphicArray,
				renderer: simpleRenderer
			});

			map.add(featureLayer);
	
		});
		view.on("click", function (event) {
		  view.hitTest(event).then(function (response) {
			if (response.results.length) {
			  let graphic = response.results.filter(function (result) {
				return result.graphic.layer === featureLayer;
			  })[0].graphic;

			  console.log("Output ",graphic.attributes);
			}
		  });
		});

	});
	</script>

</head>
<body>
  <div id="mapViewDiv"></div>
</body>
</html>

Kishore · ‎12-27-2021

@victhomas - You have to define the feature layer out fields while creating the feature layer. By default out fields are null and it will return only ID field. check the help document FeatureLayer outFields also FeatureLayerView.availableFields

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.22
    </title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

      <script>
	require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
	  "esri/layers/FeatureLayer",
	  "esri/geometry/Point"
    ], function(Map, MapView, Graphic, GraphicsLayer, FeatureLayer, Point) {

		let graphicArray = [];
		let featureLayer;

		let simpleRenderer = {
			type: "simple",
			symbol: {
				type: "simple-marker",
				style: "circle",
				color: [226, 119, 240], 
				outline: {
					color: [0, 0, 0],
					width: 1
				}
			}
		};
		
		let map = new Map({
			basemap: "gray-vector"
		});
		
		let view = new MapView({
			container: "viewDiv",  
			map: map,
			center: [-90.674, 36.729],
			zoom: 10
		});
		
		let ptData = [{"id":0,"lat": "36.7239","long":"-90.67514"},
						{"id":1,"lat": "36.72839","long":"-90.6764"},
						{"id":2,"lat": "36.74339","long":"-90.6674"},
						{"id":3,"lat": "36.79336","long":"-90.62574"},
						{"id":4,"lat": "36.72739","long":"-90.674"},
						{"id":5,"lat": "36.78639","long":"-90.6654"},
						{"id":6,"lat": "36.72366","long":"-90.6734"},
						{"id":7,"lat": "36.76369","long":"-90.6644"},
						{"id":8,"lat": "36.7276","long":"-90.6784"},
						{"id":9,"lat": "36.7238","long":"-90.6714"},
						{"id":10,"lat": "36.7233","long":"-90.6574"}];
		

		view.when().then(function(){
			for(let i = 0; i< ptData.length; i++){
				let point = {
					type: "point",
					longitude: ptData[i].long,
					latitude: ptData[i].lat
				};
				
				let pointGraphic = new Graphic({
					geometry: point,
					attributes: {
						"id": ptData[i].id,
						"latCoord": ptData[i].lat,
						"longCoord": ptData[i].long,
					},
					symbol: simpleRenderer.symbol
				});
				graphicArray.push(pointGraphic);
			}
			featureLayer = new FeatureLayer({
				fields: [{name: "id",alias: "id",type: "oid"},
						{name: "latCoord",alias: "latCoord",type: "string"},
						{name: "longCoord",alias: "longCoord",type: "string"}],
				objectIdField: "id",
				geometryType: "point",
				spatialReference: { wkid: 4326 },
				source: graphicArray,
				renderer: simpleRenderer
			});
      featureLayer.outFields = ["*"];
			map.add(featureLayer);
	
		});
		view.on("click", function (event) {
		  view.hitTest(event).then(function (response) {
			if (response.results.length) {
			  let graphic = response.results.filter(function (result) {
				return result.graphic.layer === featureLayer;
			  })[0].graphic;

			  console.log("Output ",graphic.attributes);
			}
		  });
		});

	});
	</script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Regards,
Kishore

View solution in original post

Kishore · ‎12-27-2021

@victhomas - You have to define the feature layer out fields while creating the feature layer. By default out fields are null and it will return only ID field. check the help document FeatureLayer outFields also FeatureLayerView.availableFields

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.22
    </title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

      <script>
	require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
	  "esri/layers/FeatureLayer",
	  "esri/geometry/Point"
    ], function(Map, MapView, Graphic, GraphicsLayer, FeatureLayer, Point) {

		let graphicArray = [];
		let featureLayer;

		let simpleRenderer = {
			type: "simple",
			symbol: {
				type: "simple-marker",
				style: "circle",
				color: [226, 119, 240], 
				outline: {
					color: [0, 0, 0],
					width: 1
				}
			}
		};
		
		let map = new Map({
			basemap: "gray-vector"
		});
		
		let view = new MapView({
			container: "viewDiv",  
			map: map,
			center: [-90.674, 36.729],
			zoom: 10
		});
		
		let ptData = [{"id":0,"lat": "36.7239","long":"-90.67514"},
						{"id":1,"lat": "36.72839","long":"-90.6764"},
						{"id":2,"lat": "36.74339","long":"-90.6674"},
						{"id":3,"lat": "36.79336","long":"-90.62574"},
						{"id":4,"lat": "36.72739","long":"-90.674"},
						{"id":5,"lat": "36.78639","long":"-90.6654"},
						{"id":6,"lat": "36.72366","long":"-90.6734"},
						{"id":7,"lat": "36.76369","long":"-90.6644"},
						{"id":8,"lat": "36.7276","long":"-90.6784"},
						{"id":9,"lat": "36.7238","long":"-90.6714"},
						{"id":10,"lat": "36.7233","long":"-90.6574"}];
		

		view.when().then(function(){
			for(let i = 0; i< ptData.length; i++){
				let point = {
					type: "point",
					longitude: ptData[i].long,
					latitude: ptData[i].lat
				};
				
				let pointGraphic = new Graphic({
					geometry: point,
					attributes: {
						"id": ptData[i].id,
						"latCoord": ptData[i].lat,
						"longCoord": ptData[i].long,
					},
					symbol: simpleRenderer.symbol
				});
				graphicArray.push(pointGraphic);
			}
			featureLayer = new FeatureLayer({
				fields: [{name: "id",alias: "id",type: "oid"},
						{name: "latCoord",alias: "latCoord",type: "string"},
						{name: "longCoord",alias: "longCoord",type: "string"}],
				objectIdField: "id",
				geometryType: "point",
				spatialReference: { wkid: 4326 },
				source: graphicArray,
				renderer: simpleRenderer
			});
      featureLayer.outFields = ["*"];
			map.add(featureLayer);
	
		});
		view.on("click", function (event) {
		  view.hitTest(event).then(function (response) {
			if (response.results.length) {
			  let graphic = response.results.filter(function (result) {
				return result.graphic.layer === featureLayer;
			  })[0].graphic;

			  console.log("Output ",graphic.attributes);
			}
		  });
		});

	});
	</script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Regards,
Kishore