How to add a nested object as content in arcGIS maps content in popupTemplates?

I am trying to display the data from https://mapafrica.afdb.org/data/locations?d=4&lang=en to an arcGIS map via JavaScript. I can add the "name" attribute to the popupTemplate via {name} but how do I add a nested value example activity.name in the content template. Have looked documentation but looks like I can only add content from root level.

Truncated json: {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"activity":{"identifier":"46002-P-DZ-D00-002","sectors":[{"id":9,"name":"Transport","sector-url":"https://www.afdb.org/en/topics-and-sectors/sectors/transport/","dashboards":[{"id":4,"name":"Integrate Africa","priority":4}]}],"totalDisbursement":0,"actual_start_date":{"year":2003,"month":"JUNE","monthValue":6,"era":"CE","dayOfYear":153,"dayOfWeek":"MONDAY","leapYear":false,"dayOfMonth":2,"chronology":{"calendarType":"iso8601","id":"ISO"}},"totalCommitment":71342035.94,"name":"Algeria - East-West Highway Construction Project - 13 km Section from Ain El Bey to the CW133 Interchange","planned_start_date":{"year":2002,"month":"DECEMBER","monthValue":12,"era":"CE","dayOfYear":338,"dayOfWeek":"WEDNESDAY","leapYear":false,"dayOfMonth":4,"chronology":{"calendarType":"iso8601","id":"ISO"}},"description":"The present intervention concerns ..","countries":["Algeria"],"url":null,"status":"Cancelled"},"latitude":"35.48668","name":"Aïn el Bey","longitude":"8.31921"},"geometry":{"type":"Point","coordinates":[8.31921,35.48668]},"id":"2219174"}.

I can display "name":"Aïn el Bey" using {name}, but how do I display "name":"Algeria - East-West Highway Construction Project - 13 km Section from Ain El Bey to the CW133 Interchange" as content in the popupTemplate?

JavaScript: function (Map, GeoJSONLayer, MapView, Locate, BasemapToggle, locationRendererCreator) { const url = "https://mapafrica.afdb.org/data/locations?d=4&lang=en"; const template = { title: "{name}", content: "{activity.name}", };

Any help would be much appreciated.

Solution

You can handle activity field as an object. To do this, just specify the field as blob type and then access the attributes as you would do it in code. Take a look at this example I made for you.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>GeoJSONLayer</title>

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

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

  <script>
    require([
      "esri/Map",
      "esri/layers/GeoJSONLayer",
      "esri/views/MapView"
    ], function (Map, GeoJSONLayer, MapView) {
      const url =
        "https://mapafrica.afdb.org/data/locations?d=4&lang=en";


      const template = {
        title: "{name}",
        content: "{activity.name}"
      };

      const renderer = {
        type: "simple",
        symbol: {
          type: "simple-marker",
          color: "orange",
          outline: {
            color: "white"
          }
        }
      };

      const geojsonLayer = new GeoJSONLayer({
        url: url,
        copyright: "USGS Earthquakes",
        popupTemplate: template,
        renderer: renderer,
        outFields: ['name', 'activity'],
        fields: [
          {
            name: "name",
            alias: "Name",
            type: "string"
          },
          {
            name: "activity",
            alias: "Activity",
            type: "blob"
          }
        ]
      });

      const map = new Map({
        basemap: "gray",
        layers: [geojsonLayer]
      });

      const view = new MapView({
        container: "viewDiv",
        center: [10, 10],
        zoom: 3,
        map: map
      });
    });
  </script>
</head>

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

</html>