Foreach for array

Question

I have an array which I populate like so

var list = [];

featureLayer.queryFeatures(querySnTR)
            .then((result) => {
                                
                   result.attachmentInfos.forEach((x) => {
                   list.push(uriString + "/" + x.id);
                  });
                });
console.log("list", list);

I print out the list with console.log and it returns values inside.

Afterwards I do a foreach to go through all the elements inside and create a div for each of them. The thing is, it doesn't even go in the foreach function.

list.forEach((x) => {
    console.log("CL", list);
    console.log("x element", x);

    var image = document.createElement("img");
    image.src = x;
    image.className = "queryImg";
    document.getElementById("queryResults").appendChild(image);
  });

It doesn't print out CL or x element for that matter. Any ideas as to why?

The whole original code, for reference

startup: function () {

                var _that = this;
                _this = _that;

                this.map.on("click", function (e) {
                    _this.map.graphics.clear();

                    identifyTask = new IdentifyTask("https://server/arcgis/rest/services/MUNICIPALITY_BUNDLE/ZK_KATASTAR_NA_ZELENILO/MapServer");

                    identifyParams = new IdentifyParameters();
                    identifyParams.tolerance = 10;
                    identifyParams.returnGeometry = true;
                    identifyParams.layerIds = [1];
                    identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                    identifyParams.width = _this.map.width;
                    identifyParams.height = _this.map.height;
                    identifyParams.spatialReference = _this.map.spatialReference;

                    identifyParams.geometry = e.mapPoint;
                    identifyParams.mapExtent = _this.map.extent;

                    identifyTask.execute(identifyParams).then(function (data) {
                        objId = data[0].feature.attributes.objectid;

                        const querySnTR = {
                            where: "1 = 1",
                            outFields: ["*"]
                        };

                        var uriString = "https://server/arcgis/rest/services/MUNICIPALITY_BUNDLE/ZK_KATASTAR_NA_ZELENILO/MapServer/101/" + objId + "/attachments";
                        var featureLayer = new esri.layers.FeatureLayer(uriString);

                        featureLayer.queryFeatures(querySnTR)
                            .then((result) => {

                                result.attachmentInfos.forEach((x) => {
                                    list.push(uriString + "/" + x.id);
                                });
                            });

                        const myFunction = async () => {
                            const { attachmentInfos } = await featureLayer.queryFeatures(querySnTR);
                            const list = attachmentInfos.map(({ id }) => `${uriString}/${id}`);
                            console.log("list", list);
                            list.forEach((x) => {
                                var image = document.createElement("img");
                                image.src = x;
                                image.className = "queryImg";
                                document.getElementById("queryResults").appendChild(image);
                            });
                        };
                    });
                });
            }

No, the array is not populated. The array is populated after your queryFeatures. Where do you call queryFeatures — Ilijanovic
– Ilijanovic, Commented May 27, 2022 at 11:32

A. Llorente · Accepted Answer · 2022-05-27 11:57:05Z

1

That's a trick on how the console works. When you are executing the log the list is empty (100% sure) because you are populating it asynchronously. But the console has the reference to it and it will print it afterwards. That's why your list is empty. You need to handle asynchrony here. You could work with an async/await approach or using promises, that will depend on the rest of your code, this is an example of how to do it with an async function (and rewritted it to modern javascript):


const myFunction = async () => {
  const {attachmentInfos} = await featureLayer.queryFeatures(querySnTR);
  const list = attachmentInfos.map(({id}) => `${uriString}/${id}`);
  console.log("list", list);
  list.forEach((x) => {
    // put your code here
  });
};

Edited: Now that you share all your code you can simply do:

featureLayer.queryFeatures(querySnTR)
  .then((result) => {                              
      result.attachmentInfos.forEach((attachmentInfo) => {
        var x = uriString + "/" + attachmentInfo.id
        var image = document.createElement("img");
        image.src = x;
        image.className = "queryImg";
        document.getElementById("queryResults").appendChild(image);
     });
});

I would recommend you also to give vars meaningful names, not x but attachmentInfo, etc...

edited May 27, 2022 at 11:57

answered May 27, 2022 at 11:24

A. Llorente

1,1826 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cucko Over a year ago

So I have added the entire function where this is supposed to occur. Should I remove my featureLayer.queryFeatures function?

A. Llorente Over a year ago

I have edited my code according to your last update, you don't need to do anything weird, why not just in the callback of the queryFeatures do all the manipulation you need?

Collectives™ on Stack Overflow

Foreach for array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related