topic Re: How do I navigate through attributes to populate a form? in ArcGIS JavaScript Maps SDK Questions

How do I navigate through attributes to populate a form?

ChrisSergent — Sun, 12 Dec 2021 06:55:41 GMT

I want to obtain the attribute information of the following:

With the following code I can get the GLOBALID, but I am in need of each attribute. I commented out what I tried to add. It did not work. For now, if you can give me an idea on how to do a second one, I can do the rest. Here is my code:

 on(dom.byId("btnSignPrevious"), "click", function () {
            console.log("Previous Works");
            var query = new esriQuery();
            var queryTask = new QueryTask(config.signLayerUrl);
            query.returnGeometry = false;
            query.outFields = ["*"];






            query.where = "SUPPORTID = " + dom.byId("signSupportId").value;
            queryTask.execute(query, function (results) {
                ii--;
                // Attempting to know how many signs are in my results
                // Use gettArray.html to get array values




                var resultItems = [];
                var resultCount = results.features.length;
                if (ii > -1) {
                    console.log("Results start now!");
                    console.log(results);
                    var featureAttributes = results.features[ii].attributes.GLOBALID;
                    //var attachLoc = results.features[ii].attributes.ATTACHLOC;
                    for (var attr in featureAttributes) {
                        console.log("Attribute: " + featureAttributes);
                        
                    }


                    //for (var attr in attachLoc) {
                    //    console.log("ATTACHLOC:" + featureAttributes);
                    //}


                } else {
                    console.log("This is where you will get the support information");
                    //document.getElementById("btnSupportNext").disabled = true;
                }




            })
        });

And here is the release on github that matches this code: csergent45/streetSigns at db8123a8c67514aefd8739743fe75880e23f31e7 · GitHub

Re: How do I navigate through attributes to populate a form?

TimWitt2 — Wed, 15 Jul 2015 19:25:48 GMT

You can access each attribute like this:

results.features[0].attributes.ATTACHLOC

Is this what you mean?

PS: Just saw you already did this, so disregard

Re: How do I navigate through attributes to populate a form?

ChrisSergent — Sun, 12 Dec 2021 06:55:44 GMT

I had to change one thing, but this simplified my code:

console.log(results.features[ii].attributes.ATTACHLOC);

My code is now(left the comments in for now):

 // Cycle through sign information with the previous button
        // Changed name to correct button name
        on(dom.byId("btnSignPrevious"), "click", function () {
            console.log("Previous Works");
            var query = new esriQuery();
            var queryTask = new QueryTask(config.signLayerUrl);
            query.returnGeometry = false;
            query.outFields = ["*"];






            query.where = "SUPPORTID = " + dom.byId("signSupportId").value;
            queryTask.execute(query, function (results) {
                ii--;
                // Attempting to know how many signs are in my results
                // Use gettArray.html to get array values




                var resultItems = [];
                var resultCount = results.features.length;
                if (ii > -1) {
                    console.log("Results start now!");
                    console.log(results);


                    console.log(results.features[ii].attributes.ATTACHNUM);


                    console.log(results.features[ii].attributes.ATTACHLOC);


                    console.log(results.features[ii].attributes.GLOBALID);




                    //var featureAttributes = results.features[ii].attributes.GLOBALID;
                    
                    //for (var attr in featureAttributes) {
                    //    console.log("Attribute: " + featureAttributes);
                        
                    //}


                    //var attachLoc = results.features[ii].attributes.ATTACHLOC;
                    //for (var attr in featureAttributes) {
                    //    console.log("ATTACHLOC:" + attachLoc);
                    //}


                    //var attachNum = results.features[ii].attributes.ATTACHNUM;
                    //for (var attr in featureAttributes) {
                    //    console.log("AttachNum:" + attachNum);
                    //}


                } else {
                    console.log("This is where you will get the support information");
                    //document.getElementById("btnSupportNext").disabled = true;
                }




            })
        });

Re: How do I navigate through attributes to populate a form?

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:55:46 GMT

Chris,

You are setting the featureAttributes to one field (GLOBALID) and then you are trying to loop through that object...

Try this instead:

                    var featureAttributes = results.features[ii].attributes;   
                    for (var attr in featureAttributes) {  
                        console.log(attr + ": " + featureAttributes[attr]);  
                          
                    }

Re: How do I navigate through attributes to populate a form?

ChrisSergent — Wed, 15 Jul 2015 19:37:12 GMT

It looks like my updated code works. Thoughts?

Re: How do I navigate through attributes to populate a form?

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:55:49 GMT

Chris,

If you want to manually specify each of the attributes in your code then using:

console.log(results.features[ii].attributes.ATTACHNUM);

will work fine. But if you just want to look through all the attributes then you do:

var featureAttributes = results.features[ii].attributes;
for (var attr in featureAttributes) {
    console.log(attr + ": " + featureAttributes[attr]);                    
}

Re: How do I navigate through attributes to populate a form?

ChrisSergent — Wed, 15 Jul 2015 19:47:45 GMT

That helps clarify it. I do want to go through on at a time as I will be updating a form. Thanks.

Re: How do I navigate through attributes to populate a form?

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:55:52 GMT

Chris,

When looping you are going through one at a time but you don't have to manually have a line for each attribute or know each attribute name before hand.

var featureAttributes = results.features[ii].attributes;
for (var attr in featureAttributes) {
    //console.log(attr + ": " + featureAttributes[attr]);
    //now you add each attribute to your form base on the attribute field name
    //you know the attribute field name from the attr object
    //assuming you have a from element with the id of the attribute
    document.getElementById(attr).value = featureAttributes[attr];
}

Re: How do I navigate through attributes to populate a form?

ChrisSergent — Wed, 15 Jul 2015 19:57:50 GMT

I am not sure I follow. When you have an element on the for that is GLOBALID and ATTACHLOC, how does the code know how to put which attribute where. They don't line up in the same order as on my form.

Re: How do I navigate through attributes to populate a form?

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:55:54 GMT

Chris,

Do you not have a form element (an input or select) in your code for each of these attributes that has an id of the attribute name?

It does not matter what order the loop hits which attribute as

document.getElementById(attr).value = featureAttributes[attr];

will but the correct value in the correct element based on the attributes name.

                        <div class="form-group">
                            <label for="signId">Sign ID</label>
                            <input type="number" class="form-control" placeholder="Sign ID" name="signId" id="signId" />
                        </div>

Based on this code from your projects index.html you have a input element with an id of "signId" so when the loop gets to a attribute with the name "signId" it will put the value of that attribute (from the Query) into that form element.

Re: How do I navigate through attributes to populate a form?

TimWitt2 — Wed, 15 Jul 2015 20:18:28 GMT

I think what Robert is talking about is how the datagrid here is populated?

ArcGIS API for JavaScript Sandbox

Re: How do I navigate through attributes to populate a form?

ChrisSergent — Sun, 12 Dec 2021 06:55:57 GMT

Here is my code:

// Cycle through sign information with the previous button
        // Changed name to correct button name
        on(dom.byId("btnSignPrevious"), "click", function () {
            console.log("Previous Works");
            var query = new esriQuery();
            var queryTask = new QueryTask(config.signLayerUrl);
            query.returnGeometry = false;
            query.outFields = ["*"];






            query.where = "SUPPORTID = " + dom.byId("signSupportId").value;
            queryTask.execute(query, function (results) {
                ii--;
                // Attempting to know how many signs are in my results
                // Use gettArray.html to get array values




                var resultItems = [];
                var resultCount = results.features.length;
                if (ii > -1) {
                    //console.log("Results start now!");


                    //console.log(results);
                    if (dom.byId("signSupportId").value == results.features[ii].attributes.SUPPORTID) {
                        ii--;
                    }
                   
                    document.getElementById("signObjectId").value = results.features[ii].attributes.GLOBALID;
                    document.getElementById("mutcd").value = results.features[ii].attributes.MUTCD;
                    document.getElementById("installed").value = results.features[ii].attributes.INSTALLED;
                    document.getElementById("signId").value = results.features[ii].attributes.SIGNID;
                    document.getElementById("facing").value = results.features[ii].attributes.FACING;
                    document.getElementById("visibility").value = results.features[ii].attributes.VISIBILITY;
                    document.getElementById("condition").value = results.features[ii].attributes.CONDITION_;






                   




                    //var featureAttributes = results.features[ii].attributes.GLOBALID;
                   
                    //for (var attr in featureAttributes) {
                    //    console.log("Attribute: " + featureAttributes);
                       
                    //}


                    //var attachLoc = results.features[ii].attributes.ATTACHLOC;
                    //for (var attr in featureAttributes) {
                    //    console.log("ATTACHLOC:" + attachLoc);
                    //}


                    //var attachNum = results.features[ii].attributes.ATTACHNUM;
                    //for (var attr in featureAttributes) {
                    //    console.log("AttachNum:" + attachNum);
                    //}


                } else {
                    console.log("This is where you will get the support information");
                    //document.getElementById("btnSupportNext").disabled = true;
                }




            })
        });

and here is an excerpt from my form:

 <div class="modal-body">
                        <div class="form-group">
                            <label for="signObjectId">Object ID</label>
                            <input type="number" class="form-control" name="signObjectId" id="signObjectId" readonly>
                        </div>
                        <!-- Mutcd Begin -->
                        <div class="form-group">
                            <label for="mutcd">MUTCD</label>
                            <select id="mutcd" class="form-control" name="mutcd" required></select>
                        </div>
                        <!-- Mutcd End -->
                        <!-- - Begin -->
                        <div class="form-group">
                            <label for="installed">Installed</label>
                            <input type="date" class="form-control" name="installed" id="installed" />
                        </div>
                        <!-- Installed End -->
                        <!-- Sign ID Begin -->
                        <div class="form-group">
                            <label for="signId">Sign ID</label>
                            <input type="number" class="form-control" placeholder="Sign ID" name="signId" id="signId" />
                        </div>
                        <!-- Sign ID End -->
                        <!-- Facing Begin -->
                        <div class="form-group">
                            <label for="facing">Facing</label>
                            <input type="text" class="form-control" placeholder="Facing" name="facing" id="facing" />
                        </div>
                        <!-- Facing End -->
                        <!-- Visibility Begin -->
                        <div class="form-group">
                            <label for="visibility">Visibility</label>
                            <select id="visibility" class="form-control" name="visibility" required></select>
                        </div>
                        <!-- Visibility End -->
                        <!-- Condition Begin -->
                        <div class="form-group">
                            <label for="condition">Condition</label>
                            <select id="condition" class="form-control" name="condition" required></select>
                        </div>
                        <!-- Condition End -->
                        <!-- Support ID Begin -->
                        <div class="form-group">
                            <label for="signSupportId">Support ID</label>
                            <input type="number" class="form-control" name="signSupportId" id="signSupportId" />
                        </div>
                        <!-- Support ID End -->
                        <!-- Text Begin -->
                        <div class="form-group">
                            <label for="text">Text</label>
                            <input type="text" class="form-control" name="text" id="text" />
                        </div>
                        <!-- Text End -->

Re: How do I navigate through attributes to populate a form?

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:56:00 GMT

Chris,

So what I am saying is with proper code optimization your from element ids would be the same CaSe and all of your actual field attribute names and that way your line 35 thru 41 being necessary you would only have these lines:

    var featureAttributes = results.features[ii].attributes;
    for (var attr in featureAttributes) {
        document.getElementById(attr).value = featureAttributes[attr];
    }

It would require your html form portion to be altered to have ids that match the attribute name

i.e.

                        <!-- Mutcd Begin -->  
                        <div class="form-group">  
                            <label for="mutcd">MUTCD</label>  
                            <select id="MUTCD" class="form-control" name="mutcd" required></select>  
                        </div>  
                        <!-- Mutcd End -->

Notice the id is the same CaSe as the actual attribute name.

Re: How do I navigate through attributes to populate a form?

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:56:02 GMT

Chris,

So your whole optimized back button function would look like this after you update all your form ids:

        on(dom.byId("btnSignPrevious"), "click", function () {
            console.log("Previous Works");
            var query = new esriQuery();
            var queryTask = new QueryTask(config.signLayerUrl);
            query.returnGeometry = false;
            query.outFields = ["*"];
            query.where = "SUPPORTID = " + dom.byId("signSupportId").value;
            queryTask.execute(query, function (results) {
                ii--;
                var resultItems = [];
                var resultCount = results.features.length;
                if (ii > -1) {
                    if (dom.byId("signSupportId").value == results.features[ii].attributes.SUPPORTID) {
                        ii--;
                    }
                    var featureAttributes = results.features[ii].attributes;
                    for (var attr in featureAttributes) {
                        document.getElementById(attr).value = featureAttributes[attr];
                    }
                } else {
                    console.log("This is where you will get the support information");
                }
            })
        });

Re: How do I navigate through attributes to populate a form?

ChrisSergent — Wed, 15 Jul 2015 20:50:22 GMT

So I take it I need to change all of my form ID's to caps to match the attributes. Is that correct, because it's not doing anything right now.

Re: How do I navigate through attributes to populate a form?

RobertScheitlin__GISP — Wed, 15 Jul 2015 20:54:36 GMT

Correct

Re: How do I navigate through attributes to populate a form?

ChrisSergent — Wed, 15 Jul 2015 21:02:50 GMT

Then that gets a little tricky. I have a SUPPORTID in both forms. The reason for this is that there is a support ID for supports and there is a support ID for signs to identify which signs relate to the supports. Any idea on how to get around that?

Re: How do I navigate through attributes to populate a form?

RobertScheitlin__GISP — Wed, 15 Jul 2015 21:10:14 GMT

Chris,

Sure just use a prefix in front of all your ids for your sign form ids. "SIGN_MUTCD" and then change the inner code of the for loop to:

document.getElementById("SIGN_" + attr).value = featureAttributes[attr];

Re: How do I navigate through attributes to populate a form?

ChrisSergent — Wed, 15 Jul 2015 21:26:53 GMT

That's a tough one. That changes most of my application as I populate dropdowns and textboxes based on the current names. Are you sure this will work, because this is the only part of my application not working right now.

Re: How do I navigate through attributes to populate a form?

RobertScheitlin__GISP — Wed, 15 Jul 2015 21:34:31 GMT

Chris,

Yes I am sure it will work.