Joining API response json data to FeatureLayer created by Jsonfile using esri js api 4.24

JayakumarPD · ‎08-29-2022

Hi,

I am using ESRI JavaScript API 4.24.

I could able to render the JSON data to the map using the bellow code.

Now I would like to join the response data received from an API, which contain the unique value similar to the rendered json feature service.

Note: I don't have this option - Dynamic data layers on the fly from data inside registered workspaces.

The api response is like this. I have to join the api response and render the map based on the MalePopulation/FemalePopulatin/TotalPopulation.

const misTblDistrict =[
                {
                    KGISDistrictCode: "01",
                    KGISDistrictName: "Belagavi",
                    MalePopulation: 233336,
                    FemalePopulation: 57438,
                    TotalPopulation: 290774
                },
                {
                    KGISDistrictCode: "02",
                    KGISDistrictName: "Bagalkot",
                    MalePopulation: 549540,
                    FemalePopulation: 844171,
                    TotalPopulation: 1393711
                },
                {
                    KGISDistrictCode: "03",
                    KGISDistrictName: "Vijayapura",
                    MalePopulation: 202111,
                    FemalePopulation: 177079,
                    TotalPopulation: 379190
                },
                {
                    KGISDistrictCode: "04",
                    KGISDistrictName: "Kalburgi",
                    MalePopulation: 222823,
                    FemalePopulation: 234340,
                    TotalPopulation: 457163
                },
                {
                    KGISDistrictCode: "05",
                    KGISDistrictName: "Bidar",
                    MalePopulation: 385580,
                    FemalePopulation: 73176,
                    TotalPopulation: 458756
                },

            ];

this is the running code.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Create Map and add a dynamic layer</title>
    <link rel="stylesheet"
          href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
    <script>
        // dojoConfig has to be configured before including the esri js library
        var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
        var dojoConfig = {
            async: true,
            //baseUrl: "/js",
            //locale: location.search.substring(1) === "" ? "en-us" : location.search.substring(1),
            packages: [
                {
                    name: "ksrsac",
                    location: locationPath + "/js/data",
                },
            ],
            parseOnLoad: false,
        };
    </script>
    <script src="https://js.arcgis.com/4.24/"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="viewDiv"></div>
    <script>
        
        require(["esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/geometry/Polygon",
            "esri/geometry/SpatialReference",
            "dojo/parser",
            "esri/renderers/SimpleRenderer",
            "dojo/text!ksrsac/district.json"], function (
                esriConfig,
                Map,
                MapView,
                FeatureLayer,
                Polygon,
                SpatialReference,
                parser,
                SimpleRenderer,
                district
            ) {
            parser.parse();
            
            const map = new Map({
                basemap: "streets-vector"
            });
            const view = new MapView({
                map: map,
                center: [76.00, 15.00],
                zoom: 6,
                container: "viewDiv"
            });
            var districts = JSON.parse(district);
        
            const {features, fields, geometryType, spatialReference} = districts;
            var districtsFeatureLayer = new FeatureLayer({
                id: "districts",
                source: features.map((feature) => {
                    return {
                        attributes: feature.attributes,
                        geometry: {
                            type: 'polygon',
                            rings: feature.geometry.rings,
                            spatialReference: new SpatialReference({ wkid: spatialReference.wkid })
                        }
                    };
                }), 
                outFields: ["*"],
                objectIdField: "OBJECTID",
                geometryType: "polygon",
                spatialReference: new SpatialReference({ wkid: spatialReference.wkid }),
            });
          map.add(districtsFeatureLayer);           
        });
    </script>
</body>
</html>

Json data is enclosed for reference.

ReneRubalcava · ‎08-31-2022

If you want to join external data to data from a FeatureLayer, it's going to require a few steps.

Create a new client-side FeatureLayer with the fields from source FL and external data, and matching geometry to source FeatureLayer
Query all the features from your source FeatureLayer. This could be troublesome if you have a large amount of data, so you might need to paginate your requests.
Iterate over your features and add new attributes to your features based on a common field.
Use FeatureLayer applyEdits to add these features to your client-side FeatureLayer.

I wrote a blog post very similar to this workflow, but doing a spatial join based on geometry. In your case it would be based on a common field and matching value.

https://odoe.net/blog/spatial-joins

Also, if you find that the join is slow due to the amount of data you have and it blocks interaction with your page, you could consider using a custom worker. We have a sample, using the spatial join with a worker, on github.

https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-custom-workers

View solution in original post

ReneRubalcava · ‎08-31-2022

If you want to join external data to data from a FeatureLayer, it's going to require a few steps.

Create a new client-side FeatureLayer with the fields from source FL and external data, and matching geometry to source FeatureLayer
Query all the features from your source FeatureLayer. This could be troublesome if you have a large amount of data, so you might need to paginate your requests.
Iterate over your features and add new attributes to your features based on a common field.
Use FeatureLayer applyEdits to add these features to your client-side FeatureLayer.

I wrote a blog post very similar to this workflow, but doing a spatial join based on geometry. In your case it would be based on a common field and matching value.

https://odoe.net/blog/spatial-joins

Also, if you find that the join is slow due to the amount of data you have and it blocks interaction with your page, you could consider using a custom worker. We have a sample, using the spatial join with a worker, on github.

https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-custom-workers

JayakumarPD · ‎09-01-2022

Sir,

Thank you for the flow.

1. Create a new client-side FeatureLayer with the fields from source FL : I have created and similar way create for the external data also

2. Query all the features from your source FeatureLayer : I will do this, feature polygon count is max-235. trouble with slowness will not be there.

3. Iterate over your features and add new attributes to your features based on a common field: this I have not done, I will do.

4. Use FeatureLayer applyEdits to add these features to your client-side FeatureLayer : this I have not done, I i will give it a try.

By this process, I think, I will get a new feature layer with joined external data, so I can apply the renderer.

Once again thank you.

JayakumarPD · ‎09-06-2022

Sir, I did some cheating to join the API response, kindly let me know it is right or wrong !

the API response array and feature layer attribute joined globally, and passed to the feature layer constructor

var j1 = misTblDistrict.map((el)=>{return(el);});
var j2= features.map((fet)=>{return(fet.attributes);});

let joinedArray = j1.map((item, i) => Object.assign({}, item, j2[i]));

create the feature layer like this

var districtsFeatureLayer = new FeatureLayer({
          id: "districts",
          source: features.map((feature, index) => {
            return {
              attributes: joinedArray[index],
              geometry: {
                type: "polygon",
                rings: feature.geometry.rings,
                spatialReference: new SpatialReference({
                  wkid: spatialReference.wkid,
                }),
              },
            };
          }),
          outFields: ["*"],
          objectIdField: "MalePopulation",
          geometryType: "polygon",
          spatialReference: new SpatialReference({
            wkid: spatialReference.wkid,
          }),
          renderer: districtRenderer7,
          popupTemplate:popupDistrict1,
        });

for attribute property attribute: joinedArray[index] has been passed.

Unfortunately it joined and given me the result. Is this way is right ?.

I am also trying the way you have mentioned. It is taking some time for me to understand.

Thank you

ChetanKargeti · ‎06-10-2023

Hi @ReneRubalcava, I am trying to create a feature layer with the help of join 2 data source, one is map-layer and other is data from JSON, but my map is not rendering because the field i have in JSON is not present in fields of feature layer. can you please help me out in this situation.

JayakumarPD · ‎07-13-2023

Kindly provide the code.