Question

我正在尝试从AJAX调用/返回创建结果列表（而不是

）。我认为我的“ for循环”无法正常工作。我在console.log中得到结果，但是大多数结果在我创建的网页上丢失。（我的URL好，等等。甚至有必要的“ cors” URL。）

这些是我在console.log中显示的结果：

{trails：Array（10），成功：1} 成功：1 踪迹：数组（10） 0：{id：7003421，名称：“海伦娜山山脊步道”，类型：“小路”，摘要：“遵循从Prosepector Gulch到海伦娜山市公园步道的海伦娜山山脊线。”，难度：“ greenBlue”，…… } 1：{id：7004967，名称：“ Emmett's Trail”，类型：“ Trail”，摘要：“从Grizzly Gulch爬到海伦娜山山脊小径的一个漂亮的森林和阴影选项。”，难度：“ blueBlack” ，…} 2：{id：7004981，名称：“ Mt Ascension Loop”，类型：“ Trail”，摘要：“沿着Mt Ascension的北侧并绕向南侧的局部环行路径。”，难度：“蓝色“，...} 3：{id：7004847，名称：“通往天堂的阶梯”，键入：“ Trail”，摘要：“首先是一条小径攀爬，然后通过短弯路下降以连接到Wakina Gulch。”，难度：“蓝色”， …} 4：{id：7004852，名称：“ Wakina Sky Trail”，键入：“ Trail”，摘要：“一条穿过森林然后进入草地并形成一个美丽的2英里以上环路的小径。”，难度：“蓝色“，...} 5：{id：7004842，名称：“ Entertainment Trail”，类型：“ Trail”，摘要：“一条美丽的步道，沿着上升山攀登，可欣赏周围群山的美景。”，难度：“ blueBlack”，…} 6：{id：7005245，名称：“ Archery Range Trail”，类型：“ Trail”，摘要：“一条平坦的小路，紧紧抓住升腾山的轮廓。”，难度：“ greenBlue”，…} 7：{id：7004841，名称：“ Eagle Scout Trail”，键入：“ Trail”，摘要：“一小段上升带您到Mt Ascension轨道系统。”，难度：“ blueBlack”，…} 8：{id：7005001，名称：“ Rodney Meadow Trail”，类型：“ Trail”，摘要：“经过一段短暂的攀爬，然后穿过风景优美的草甸穿过一条平坦的小路。”，难度：“ blue”，…} 9：{id：7004980，名称：“ 2006 Trail”，类型：“ Trail”，摘要：“在Mt Ascension上北侧的攀登折返路径。”，难度：“ blue”，…} 长度：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.

Answer 1

首先，您正在使用FOR循环遍历JSON响应，但是它缺少所有键中的索引。其次，您的FOR循环条件错误，您使用了错误的对象。最后，您将值保存在变量中，然后清空div，然后将这些变量放入div中，从而在每次迭代后清除div中的所有内容（也就是说，仅显示div中的最后一次迭代）

您可以尝试进行以下更正：

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);
    };

我正在尝试根据AJAX调用的返回结果创建结果数组。我怎么做？

1 个答案: