Search tool giving me a random error

361
4
Jump to solution
06-28-2017 04:17 PM
AlexGole3
Occasional Contributor III

Hi all,

I am using a template from GitHub(ESRI) and it seems like the search tool is giving me a random error after i click on the suggestion:

line 598: 

Code:

var projectid = result.results[result.numResults][0].feature.attributes.PROJECT_ID;

All the code

Code:

 on(this._geocoder, 'search-results', lang.hitch(this, function (result) {  
       
            if(result){
                    var projectid = result.results[result.numResults][0].feature.attributes.PROJECT_ID;
                    //result.results[result.numResults][0].feature.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 2), new Color([255, 255, 0, 0.25]))
                    //console.log(result.results[result.numResults][0].feature);
                    window.history.pushState(projectid, null, "?projectid=" + projectid);
                    saveState.push(result.results[result.numResults][0].feature.attributes.PROJECT_ID);
              
                    this._selectProject(projectid);
                    var graphicExt = result.results[result.numResults][0].feature.geometry.getExtent();
                            //console.log(graphicExt);
                    mapobject.infoWindow.pagingInfo = true; 
                    mapobject.infoWindow.pagingControls = true;
                    mapobject.infoWindow.titleInBody = true;
           
                    //mapobject.infoWindow.setTitle(result.results[result.numResults][0].feature.attributes.Description);
                    mapobject.infoWindow.setContent("<div style='font-size: 12px;line-height: 16px;font-weight: bold;'>"+result.results[result.numResults][0].feature.attributes.Description +"</div><div style='border-top: 1px solid #eee;margin-top: 6px;margin-bottom: 6px'></div>" +
                            "<table><tr><td style='padding-right: 5px;color: #888888;'>Project </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.PROJECT_ID + "</td></tr>" +
                            "<tr><td style='padding-right: 5px;color: #888888;'>Project Name </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.Description + "</td></tr>"+
                            "<tr><td style='padding-right: 5px;color: #888888;'>Project Details </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.PublicProjDesc + "</td></tr>"+
                            "<tr><td style='padding-right: 5px;color: #888888;'>Project Manager</td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.ProjMgrName + "</td></tr>" +
                            "<tr><td style='padding-right: 5px;color: #888888;'>Project Cost ($) </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.ProjectCost + "</td></tr>" +
                            "<tr><td style='padding-right: 5px;color: #888888;'>Supervisor Districts </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.SuperDistricts + "</td></tr>" +
                            "<tr><td style='padding-right: 5px;color: #888888;'>TIM Zones </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.TIMZones + "</td></tr>" +
                            "<tr><td style='padding-right: 5px;color: #888888;'>Funding Sources </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.FundSources + "</td></tr>" +
                            "<tr><td style='padding-right: 5px;color: #888888;'>Construction Start </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.ConstrStartFY + "</td></tr></table>"
                        );

                    mapobject.infoWindow.show(graphicExt.getCenter());
                    mapobject.setExtent(graphicExt.expand(2));
                }

        }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
ChrisSmith7
Frequent Contributor

Maybe something like this:

on(this._geocoder, 'search-results', lang.hitch(this, function (result) {
          if(result){
               var _result = result.results[result.numResults - 1][0];
               var _resultFeature = _result.feature;
               var _resultFeatureAtrributes = _resultFeature.attributes;
               var projectid = _resultFeatureAtrributes.PROJECT_ID;
          
               _resultFeature.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 2), new Color([255, 255, 0, 0.25]))
               console.log(_resultFeature);
               window.history.pushState(projectid, null, "?projectid=" + projectid);
               saveState.push(_resultFeatureAtrributes.PROJECT_ID);
          
               this._selectProject(projectid);
               var graphicExt = _resultFeature.geometry.getExtent();
               //console.log(graphicExt);
               mapobject.infoWindow.pagingInfo = true;
               mapobject.infoWindow.pagingControls = true;
               mapobject.infoWindow.titleInBody = true;
          
               //mapobject.infoWindow.setTitle(result.results[result.numResults][0].feature.attributes.Description);
               mapobject.infoWindow.setContent("<div style='font-size: 12px;line-height: 16px;font-weight: bold;'>" + _resultFeatureAtrributes.Description +"</div><div style='border-top: 1px solid #eee;margin-top: 6px;margin-bottom: 6px'></div>" +
                    "<table><tr><td style='padding-right: 5px;color: #888888;'>Project </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.PROJECT_ID + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Project Name </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.Description + "</td></tr>"+
                    "<tr><td style='padding-right: 5px;color: #888888;'>Project Details </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.PublicProjDesc + "</td></tr>"+
                    "<tr><td style='padding-right: 5px;color: #888888;'>Project Manager</td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ProjMgrName + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Project Cost ($) </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ProjectCost + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Supervisor Districts </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.SuperDistricts + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>TIM Zones </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.TIMZones + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Funding Sources </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.FundSources + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Construction Start </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ConstrStartFY + "</td></tr></table>"
               );
               mapobject.infoWindow.show(graphicExt.getCenter());
               mapobject.setExtent(graphicExt.expand(2));
          }
     }));

Note, I only did a quick smoke test, so you might want to test thoroughly to make sure it's working as intended.

View solution in original post

0 Kudos
4 Replies
ChrisSmith7
Frequent Contributor

Do you have the application accessible, either on your own site, or maybe something like JSFiddle? What template on GitHub are you using? Have you tried debugging result on 598?

0 Kudos
AlexGole3
Occasional Contributor III

Chris,

I have done some more testing since yesterday.

The app is here: Capital Improvement Projects 

1) When you start the app the search toolbar works and I get that arrow to the left

2) When I pass a query URL like this :"Capital Improvement Projects ", then try to use the search tool it stops working and gives me the error message I posted above and the search toolbar does not show the drop down arrow anymore.

Any idea why?

0 Kudos
ChrisSmith7
Frequent Contributor

On initial load, I'm not able to get a drop-down, but if I start typing "7" and click on the recommendation "77123 Alder Drive..." I get the exception in the console. Debugging this line:

result.results[result.numResults][0].feature.attributes.PROJECT_ID‍

I see that you've got one result in the array, so result.numResults = 1. That's not a valid index since it is zero based... using this:

result.results[0][0].feature.attributes.PROJECT_ID

I got the result - "77123":

Changing the js file in Chrome, it works. Here's the result:

You might want to try "result.numResults - 1" in your code since it's zero based. I'd probably also refactor your function to reduce code replication.

0 Kudos
ChrisSmith7
Frequent Contributor

Maybe something like this:

on(this._geocoder, 'search-results', lang.hitch(this, function (result) {
          if(result){
               var _result = result.results[result.numResults - 1][0];
               var _resultFeature = _result.feature;
               var _resultFeatureAtrributes = _resultFeature.attributes;
               var projectid = _resultFeatureAtrributes.PROJECT_ID;
          
               _resultFeature.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 2), new Color([255, 255, 0, 0.25]))
               console.log(_resultFeature);
               window.history.pushState(projectid, null, "?projectid=" + projectid);
               saveState.push(_resultFeatureAtrributes.PROJECT_ID);
          
               this._selectProject(projectid);
               var graphicExt = _resultFeature.geometry.getExtent();
               //console.log(graphicExt);
               mapobject.infoWindow.pagingInfo = true;
               mapobject.infoWindow.pagingControls = true;
               mapobject.infoWindow.titleInBody = true;
          
               //mapobject.infoWindow.setTitle(result.results[result.numResults][0].feature.attributes.Description);
               mapobject.infoWindow.setContent("<div style='font-size: 12px;line-height: 16px;font-weight: bold;'>" + _resultFeatureAtrributes.Description +"</div><div style='border-top: 1px solid #eee;margin-top: 6px;margin-bottom: 6px'></div>" +
                    "<table><tr><td style='padding-right: 5px;color: #888888;'>Project </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.PROJECT_ID + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Project Name </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.Description + "</td></tr>"+
                    "<tr><td style='padding-right: 5px;color: #888888;'>Project Details </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.PublicProjDesc + "</td></tr>"+
                    "<tr><td style='padding-right: 5px;color: #888888;'>Project Manager</td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ProjMgrName + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Project Cost ($) </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ProjectCost + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Supervisor Districts </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.SuperDistricts + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>TIM Zones </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.TIMZones + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Funding Sources </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.FundSources + "</td></tr>" +
                    "<tr><td style='padding-right: 5px;color: #888888;'>Construction Start </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ConstrStartFY + "</td></tr></table>"
               );
               mapobject.infoWindow.show(graphicExt.getCenter());
               mapobject.setExtent(graphicExt.expand(2));
          }
     }));

Note, I only did a quick smoke test, so you might want to test thoroughly to make sure it's working as intended.

View solution in original post

0 Kudos