Я пытаюсь создать массив результатов из моего возврата на вызов AJAX.Как я могу это сделать?

Question

Я пытаюсь создать список (не

) результатов вызова / возврата AJAX.Я думаю, что что-то не хватает моей "для цикла", чтобы работать.Я получаю результаты в моем console.log, но большинство результатов отсутствует на веб-странице, которую я создаю.(У меня хороший URL и т. Д. Даже у меня есть необходимый URL-адрес "cors".)

Вот мои результаты, показанные в файле console.log:

{trails: Array (10), success: 1} успех: 1 тропа: Массив (10) 0: {id: 7003421, название: «Тропа хребта Хелены», тип: «Тропа», краткая сводка: «По хребту горы Хелена от Проспектора Галча до города Горы Хелена»Парковые тропы. ", Сложность:" greenBlue ",…} 1: {id: 7004967, имя:" Тропа Эммета ", тип:" Тропа ", краткая информация:" Отличный лесной и затененный вариант для восхождения на гору ХеленаСлед хребта из Grizzly Gulch. ", Сложность:" blueBlack ",…} 2: {id: 7004981, name:" Mt Ascension Loop ", тип:" Trail ", сводка:" След частичной петли, который следует за северной сторонойВознесение на гору и зацикливание на южную сторону. ", Сложность:" синий ",…} 3: {id: 7004847, имя:" Лестница в небеса ", тип:" Тропа ", краткая информация:" Сначала идет короткая тропа, затем выбрасывая короткие переключатели, чтобы подключиться к ущелью Вакина. ", сложность:" синий ",…} 4: {id: 7004852, название: "Wakina Sky Trail", тип: "Trail", краткое содержание: "Тропа, которая поднимается через лес, а затем на луг и образует красивую петлю длиной 2 мили.", Сложность: "blue",…} 5: {id: 7004842, название: "Тропа развлечений", тип: "Тропа", краткая информация: "Восхождение на красивую тропу Mt.Восхождение с великолепным видом на окружающие горы. ", Сложность:" blueBlack ",…} 6: {id: 7005245, название:" Trail Range Archery ", тип:" Trail ", краткое содержание:" Плоская тропа, которая охватывает контурыгорыВосхождение. ", Сложность:" greenBlue ",…} 7: {id: 7004841, имя:" Eagle Scout Trail ", тип:" Trail ", краткое содержание:" Короткое восхождение, ведущее в систему следов Mt Ascension. ",Сложность: "blueBlack",…} 8: {id: 7005001, имя: "След Родоу Медоу", тип: "След", краткое содержание: "Короткое восхождение, а затем хорошая плоская тропа через луг с видами.", сложность: "синий",…} 9: {id: 7004980, имя: "Тропа 2006", тип: "Тропа", краткая информация: "Тропа обратного подъема вверх по северной стороне горы Вознесения.", сложность: "синий",…} Длина: 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

Прежде всего, вы перебираете ответ JSON с циклом FOR, но в нем нет индекса во всех ключах. Во-вторых, ваше условие цикла 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);
    };