我正在嘗試通過AJAX調用返回創建一個結果數組。 我怎么做？

Question

我正在嘗試創建一個列表（不是

來自AJAX調用/返回的結果。 我認為我的“for循環”工作缺少一些東西。 我在我的console.log中得到了結果，但我正在創建的網頁上缺少大部分結果。 （我的網址很好，等等。甚至還有必要的“cors”網址。）

這些是我在console.log中顯示的結果：

{trails：Array（10），success：1}成功：1條路徑：數組（10）0：{id：7003421，名稱：“Mount Helena Ridge Trail”，類型：“Trail”，摘要：“跟隨海倫娜山從Prosepector Gulch到Mount Helena城市公園小徑的山脊。“，難度：”greenBlue“，......} 1：{id：7004967，名稱：”Emmett's Trail“，類型：”Trail“，摘要：”一個漂亮的森林和陰影從Grizzly Gulch登上海倫娜山徑的選項。“，難度：”blueBlack“，...} 2：{id：7004981，名稱：”Mt Ascension Loop“，類型：”Trail“，摘要：”A沿着阿森松山北側的部分環路，環繞到南側。“，難度：”藍色“，......} 3：{id：7004847，名稱：”天堂的階梯“，類型：”小道“，摘要：“首先爬上一條短路，然后通過短路回轉連接到Wakina Gulch。”，難度：“藍色”，......} 4：{id：7004852，名稱：“Wakina Sky Trail”，類型：“路徑“，摘要：”一條小路爬過森林，然后進入草地，形成一個男友 tiful 2+英里循環。“，難度：”藍色“，...} 5：{id：7004842，名稱：”娛樂小道“，類型：”小道“，摘要：”美麗的小徑攀登山。 提升與周圍群山的美景。“，難度：”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”，摘要：“登山后仰山上的一條登山路徑。”，難度：“藍色”， ......}長度：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循環條件錯誤，你使用的是錯誤的對象。 最后，您在變量中保存值，然后EMPTYING 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);
    };