I'm trying to create an array of results from my return on an AJAX call. How do I do that?

Question

I'm trying to create a list (not a

) of results from an AJAX call/return. I think there's something missing for my "for loop" to work. I'm getting the results in my console.log but most of the results are missing on the webpage I'm creating. (My URL is good, etc. Even have the necessary "cors" URL.)

These are my results showing in the console.log:

{trails: Array(10), success: 1} success: 1 trails: Array(10) 0: {id: 7003421, name: "Mount Helena Ridge Trail", type: "Trail", summary: "Follows the Mount Helena ridgeline from Prosepector Gulch to the Mount Helena City Park trails.", difficulty: "greenBlue", …} 1: {id: 7004967, name: "Emmett's Trail", type: "Trail", summary: "A nice forested and shaded option for climbing up to the Mt. Helena Ridge Trail from Grizzly Gulch.", difficulty: "blueBlack", …} 2: {id: 7004981, name: "Mt Ascension Loop", type: "Trail", summary: "A partial loop trail that follows the north side of Mt Ascension and loops around to the south side.", difficulty: "blue", …} 3: {id: 7004847, name: "Stairway to Heaven", type: "Trail", summary: "A short trail climbing at first, then dropping through short switchbacks to connect to Wakina Gulch.", difficulty: "blue", …} 4: {id: 7004852, name: "Wakina Sky Trail", type: "Trail", summary: "A trail that climbs through forest and then into a meadow and forms a beautiful 2+ mile loop.", difficulty: "blue", …} 5: {id: 7004842, name: "Entertainment Trail", type: "Trail", summary: "A beautiful trail climbing Mt. Ascension with great views of the surrounding mountains.", difficulty: "blueBlack", …} 6: {id: 7005245, name: "Archery Range Trail", type: "Trail", summary: "A flat trail that hugs the contours of Mt. Ascension.", difficulty: "greenBlue", …} 7: {id: 7004841, name: "Eagle Scout Trail", type: "Trail", summary: "A short ascent taking you to the Mt Ascension trail system.", difficulty: "blueBlack", …} 8: {id: 7005001, name: "Rodney Meadow Trail", type: "Trail", summary: "A short climb and then a nice flat trail through a meadow with views.", difficulty: "blue", …} 9: {id: 7004980, name: "2006 Trail", type: "Trail", summary: "A climbing switchback trail up the north side of Mt Ascension.", difficulty: "blue", …} length: 10

        url: hikeQueryURL,
        method: "GET"
      }).then(function(hikeResponse) {

        // Printing the entire object to console
        console.log(hikeResponse);

        for(i = 0; i < trails.length; i++) {

          // Constructing HTML containing the trail information
          var hikeName = $("<h1>").text(hikeResponse.trails.name);
          var hikeImage = $("<img>").attr("src", hikeResponse.trails.imgSqSmall);
          var hikeSummary = $("<p>").text(hikeResponse.trails.summary);
          var hikeLength = $("<h2>").text("Trail length: " + hikeResponse.trails.length);
          var hikeCondition = $("<p>").text("Current Trail Conditions: " + hikeResponse.trails.conditionStatus + ": " + hikeResponse.trails.conditionDetails);

          // Empty the contents of the "hiking-info" div, append the new trail content
          $("#hiking-info").empty();
          $("#hiking-info").append(hikeName, hikeImage, hikeSummary, hikeLength, hikeCondition);
        };

      });```

I'm just expecting all of the info from the AJAX return to be put into my variables, then appended into my empty "hiking-info" div.

can you edit your question? It's quite confusing – João Pimentel Ferreira Jun 24 '19 at 20:07 — João Pimentel Ferreira, Jun 24 '19 at 20:07

score 0 · Accepted Answer · answered Jun 24 '19 at 20:10

First of all, you are iterating trough the JSON response with a FOR loop, but it's missing the index in all keys. Second, your FOR loop condition is wrong, you are using the wrong object. And last, you are saving values in your variables, then EMPTYING the div, and then putting those variables in the div, thus clearing all content in the div after each iteration (this is, showing only the last iteration in the div)

You may try with this corrections:

for(i = 0; i < hikeResponse.trails.length; i++) {
// Constructing HTML containing the trail information
      var hikeName = $("<h1>").text(hikeResponse.trails[i].name);
      var hikeImage = $("<img>").attr("src", hikeResponse.trails[i].imgSqSmall);
      var hikeSummary = $("<p>").text(hikeResponse.trails[i].summary);
      var hikeLength = $("<h2>").text("Trail length: " + hikeResponse.trails[i].length);
      var hikeCondition = $("<p>").text("Current Trail Conditions: " + hikeResponse.trails[i].conditionStatus + ": " + hikeResponse.trails[i].conditionDetails);

      // no need for empty the div
      //$("#hiking-info").empty();
      $("#hiking-info").append(hikeName, hikeImage, hikeSummary, hikeLength, hikeCondition);
    };

jme, thanks! I've got a results from my AJAX return showing on my webpage. BUT I have another situation: I have results from one AJAX call communicating with another AJAX call (basically, lat/long coordinates being input into another AJAX call to get results). Someone told me I needed to delay the 2nd AJAX call with this code: `var timer, delay = 1000; timer = setInterval(function() {` But I'm now getting multiple arrays of results. (Basically a LOT of returns on my webpage.) — Andrew Rea, Jun 24 '19 at 20:23
@AndrewRea I'm glad it worked! You can look at [this](https://stackoverflow.com/questions/10089447/jquery-ajax-request-inside-ajax-request) question to resolve it, or write a new question. — jme, Jun 24 '19 at 20:32

I'm trying to create an array of results from my return on an AJAX call. How do I do that?

1 Answers1