JS API version upgrade issue on hitTest()

242
1
Jump to solution
12-26-2021 09:26 PM
victhomas
New Contributor III

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> 
0 Kudos
1 Solution

Accepted Solutions
Kishore
Occasional Contributor

@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

1 Reply
Kishore
Occasional Contributor

@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