AnsweredAssumed Answered

popup  action parse  selected attribution as Jsonor Table Div

Question asked by Henseki on Aug 13, 2017
Latest reply on Aug 14, 2017 by rscheitlin

Hi All

 

Got the sample code from the link below

https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/index.html

I have modified the attribute table to fit to my attribute table.

so from the sample if you click on the bewrey info, instead of linking to a website.

I want to Location attribute to be return as a table or json.

see the code below. I have set var info to get the LOCATION.  How do I parse it so it shows as as a json format or table?

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Custom popup actions per feature attribute - 4.4</title>

  <style>
    body {
      font-family: sans-serif;
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    #viewDiv {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(
      Map, MapView, FeatureLayer
    ) {

      var map = new Map({
        basemap: "streets-navigation-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [0.46564130, 51.736810] ,
        zoom: 17
      });

      /********************
       * Add feature layer
       ********************/
      // sampling of breweries
      var featureLayer = new FeatureLayer({
        outFields: ["*"],
       // definitionExpression: "country = 'United States'",

        // add a custom action
        popupTemplate: {
          title: "{name}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "LOCATION"
            }, {
              fieldName: "address1",
              label: "address"
            }, {
              fieldName: "city"
            }, {
            fieldName: "state"
            }, {
              fieldName: "phone"
            }, {
              fieldName: "website"
            }]
          }],
          actions: [{
            id: "find-ADDRESS",
            image: "beer.png",
            title: "Brewery Info"
          }]
        }
      });

      map.add(featureLayer);

   
var resultsTable = dom.byId("tbl");

        function showResults(response) {

          var results = response.results;

  // Clear the cells and rows of the table to make room for new results
        resultsTable.innerHTML = "";
        if (results.length === 0) {
          resultsTable.innerHTML = "<i>No results found</i>";
          loadingImg.style.visibility = "hidden";
          return;
        }
      }

 

      view.then(function() {
        var popup = view.popup;
        popup.viewModel.on("trigger-action", function(event) {
          if (event.action.id === "find-ADDRESS") {
            var attributes = popup.viewModel.selectedFeature.attributes;
            // Get the "website" field attribute
            var info = attributes.LOCATION;
            // Make sure the "website" attribute value is not null
            if (info !== null) {
              // Open up a new browser using the URL value in the 'website' field
              //CELL.open(info.trim());
                showResults();
              // If the "website" value is null, open a new window and Google search the name of the brewery
            }
          }
        });
      });
    });
  </script>

</head>

<body class="light">
  <div id="viewDiv">
  </div>
</body>

</html>

Outcomes