使用 AJAX 在 jQuery 中循环嵌套数组-解网

问：

我有一个 JSON 文件，我正在 AJAX 和 jQuery 中使用，它具有以下数据结构。

    {
  "status": 200,
  "data": [
    {
      "date": "2020-09",
      "name": "September 2020",
      "days": [
        {
          "date": "2020-09-19",
          "number": "19",
          "day": "Wed"
        },
        {
          "date": "2020-09-21",
          "number": "21",
          "day": "Fri"
        },
        {
          "date": "2020-09-24",
          "number": "24",
          "day": "Tues"
        },
        {
          "date": "2020-09-30",
          "number": "30",
          "day": "Sun"
        }
      ]
    },
    {
      "date": "2020-10",
      "name": "October 2020",
      "days": [
        {
          "date": "2020-10-24",
          "number": "24",
          "day": "Tues"
        },
        {
          "date": "2020-10-30",
          "number": "30",
          "day": "Wed"
        }
      ]
    }
  ]
}

我想显示一个月，然后显示嵌套在该月份对象中的相应日期。

success: (response) => {
  $("#date-time-picker").show();

  response.data.forEach((month) => {
    console.log(month.name);
    $("#date-select-container").append(
      '<p class="py-15 font-small__14 m-0">' +
        month.name +
        '</p><div class="d-flex flex-wrap date-picker justify-content-center light-blue-border--bottom pb-5 w-100"></div>'
    );
    month.days.forEach((days) => {
      let dateSelectHtml =
        '<label class="mb-0"><input type="radio" name="date" class="card-input-element" value="' +
        days.date +
        '" /><div class="card card-input light-blue-border px-10 py-20"><h2>' +
        days.number +
        '</h2><p class="booking-info__standard-color m-0">' +
        days.day +
        "</p></div></label>";
      $(".date-picker").append(dateSelectHtml);
    });
  });
},

这是我按原样运行它时得到的结果。正如你所看到的，它遍历第一个月对象中的所有嵌套天数，但只遍历第二个月对象中正确的 2 天。 Image of front end

jQuery ajax 循环嵌套

$(".date-picker")选择具有该类的所有元素。所以在你的情况下，9月和10月的那个。然后将添加到集合中的所有元素中，因此是“九月”和“十月”。您必须找到一种方法来仅引用您为当月添加的内容。.append()dateSelectHtml.date-picker

0赞 Criostoir Mac Tomás 12/16/2020

我正在考虑动态添加一个与对象的日期属性相对应的 id，但不确定它是如何工作的？我不确定孩子们是怎么知道他们各自的父母是谁的。

0赞 Andreas 12/16/2020

您是按顺序添加它们。因此，一种方法是仅选择 .或者将元素存储在额外的 jQuery 对象中，将日期附加到该对象上，然后添加元素，...:last.date-picker.date-picker

答：

0赞 Criostoir Mac Tomás 12/16/2020 #1

我让它起作用了。

对于那些遇到这个问题并有同样问题的人来说，问题是：

在第二个循环中，我没有正确识别父循环。

          response.data.forEach((month) => {
        $("#date-select-container").append(
          '<p class="py-15 font-small__14 m-0">' +
            month.name +
            '</p><div class="d-flex flex-wrap date-picker justify-content-center light-blue-border--bottom pb-5 w-100" id="month-' +
            month.date + // Here I have added the month.date as an ID for the child to identify it's parent in the next loop
            '"></div>'
        );
        if (month.days.length) {
          month.days.forEach((days) => {
            let dateSelectHtml =
              '<label class="mb-0"><input type="radio" name="date" class="card-input-element" value="' +
              days.date +
              '" /><div class="card card-input booking-info__standard-color light-blue-border px-20 m-10 py-20"><h2>' +
              days.number +
              '</h2><p class="booking-info__standard-color m-0">' +
              days.day +
              "</p></div></label>";
            $("#month-" + month.date).append(dateSelectHtml); // And then I am identifying that here to append to the correct ID.
          });
        } else {
          let noDays =
            "<p>Unfortunately there are no days available for this month</p>";
          $("#month-" + month.date).append(noDays);
        }
      });

上一个：我正在使用 jquery 中继器 js 库进行重复 html，但是当我尝试在嵌套中继器中添加元素时，外部中继器也称为

下一个：在 for 循环中嵌套的 ajax 函数调用

使用 AJAX 在 jQuery 中循环嵌套数组

Looping nested arrays in jQuery with AJAX

评论