Pushing query results to innerHTML

[MatthewBaker2]

Hi all,

The geocode details sample has a great method of pushing results from a locator to the innerHTML of a DIV component by looping through the results, pushing them to an array, then joining that array to the DIV by way of the innerHTML property.

What I'd like to do is take query results and push them to the DIV the same way. This gives me the option to set HTML styling properties, set hyperlinks, and do things the sample does like set up the zoom button, etc.

In the attached HTML, you'll see I'm getting some progress:

- the locators fire with results

- the two queries fire with results

- the displayResults script fires, and the 'red table' is created

But...I can't seem to figure out why the results aren't pushing to the content array.

UPDATE: Attached code now uses dropdown to set the field that I want to return from the findBoundary query.

I've got the two samples side-by-side, and the only thing I can think of is that the way the address locator results are handled are different than the query results - but I'm not sure what that difference is.

The zoom buttons and drawing the results on the map aren't required just yet...

Any thoughts on where I'm stumped are appreciated!

Thank you!!!

Message was edited by: Matthew Baker // added updated code

[JakeSkinner]

Hi Matthew,

When calling the attribute, you will need to do so in the following format:

results.features[0].attributes.field_name

You will also need to specify the field in quotes for the query.  Ex:

queryBounds.outFields = ["grade"];

Looks like you have the following:

queryBounds.outFields = [grade]

resultBound = results.features[0].attributes[grade]

I didn't see the grade field in the service, but if you choose an integer field, this will get you along further in your app.  Ex:

queryBounds.outFields = ["*"]

resultBound = results.features[0].attributes.ELEM_NUM

Also, when iterating through the results object in the displayResults function, you will need to specify the features array.  Ex:

arrayUtils.forEach(results.features, function(result)

Here is a JS Fiddle with the app working a little further.

[MatthewBaker2]

Jake Skinner‌ -

Re. the outfield - that is meant to be the name of the variable - we fixed that issue this morning! 'grade' is not a field in the table, but references the value of a variable set by a drop-down.

If you try this address in the JSFiddle (thanks for that by the way!), you can see how multiple results are handled:

2847 Akron St, Denver, CO

Which is exactly what I'm after...

So how can we take your suggestions, along with what Jonathan Uihlein‌ said about having empty results object, and use it with the {grade} variable rather than hard-coding the grade field?

Thanks to both of you!!!

[JonathanUihlein]

This was confusing at first... there's a lot of jumping around in this code.

showResults(); and displayResults() are vague names and should probably be changed to be more specific.

showResults() is the callback function for the locator.

showResults() looks to take one result (due to return false), create a graphic and put it on the map.

showResults() passes the single result to findBoundary() which runs a query that returns a graphic based on:

queryBounds.outFields = [grade];

findBoundary() then passes an attribute from a graphic object (feature) based on feature.attributes[grade] to getSchools()

It looks like you expect the results object in your schools query task to contain multiple results but it will always be one result because of this line:

querySchools.where = "Res_num = " + boundNum;

With this in mind, you execute your query task and generate a new 'results' object.

schoolsQt.execute(querySchools, function(results) {
   //alert('query should have fired');
   displayResults(results);
});

The 'results' object here will only contain one feature, based on the logical application workflow so far.

The results object here is different than the one you are using in showResults();

Because of this, your results object is not actually a typical array which means your loop in displayResults() doesn't work:

arrayUtils.forEach(results, function(result, index) {
...

[MatthewBaker2]

map = new Map("map", { });

You can take it from there...

[MatthewBaker2 · Accepted solution]

After much help from John Gravois‌, I was able to get this to work:

function displayResults(results) {

                    var rdiv = dom.byId("resultsDiv");
                    rdiv.innerHTML = "<p><b>Results : " + results.features.length + "</b></p>";
                    var content = [];
                    console.log("Results of boundary query: ");
                    console.log(results);

                    arrayUtil.forEach(results.features, function(result, index) {
                        //CHECK USING BREAK POINTS
                        var x = result.geometry.x.toFixed(5);
                        var y = result.geometry.y.toFixed(5);
                        content.push("<input type='button' value='Z' onclick='zoomTo(" + y + "," + x + ")'/>");
                        console.log(x + "," + y);
                        content.push("Attend School #" + result.attributes.Attend_Schl);
                        content.push("School Name: " + result.attributes.SchoolName);
                        content.push("<p>");

                    });

                    //
                    rdiv.innerHTML += content.join("");
                }

By using the arrayUtil.forEach (09.) method, and then passing results.features in as result (09.), I could then grab not only the result.geometry.x and y (11., 12.) but also the result.attributes.fieldName (15., 16.), then finally push it all to the innerHTML property of the rdiv component (22.)

Simple solution, and I greatly appreciate everyone's help!

cc. Jake Skinner‌ / Jonathan Uihlein‌