jQuery .each() 只显示最后一个或第一个值答案

【问题标题】：jQuery .each() only shows last or first valuejQuery .each() 只显示最后一个或第一个值
【发布时间】：2021-11-19 22:45:28
【问题描述】：

Stack 上有很多类似我的问题，但我无法让它与这些答案一起工作。

用户选择一个省份，然后从 flatpickr 日历中选择一个可用的日期。可用日期来自 JSON 数组，需要以 enable: ["2021-08-05","2021-05-03", etc.]. 的形式插入到配置中。但是，我只从 JSON 数组中获得第一个或经过一些调整的最后一个可用日期。我在做什么错以及如何在文档要求之间用逗号解决它。

$(document).ready(function() {
      $('select[name="provincie"]').on('change', function() {
        var provincie_id = $(this).val();

        if (provincie_id) {
          $.ajax({
            url: 'link/' + provincie_id,
            type: 'GET',
            dataType: 'json',
            success: function(data) { //see data below
              var html = [""]

              $.each(data, function(key, value) {
                config = {
                  inline: true,
                  altInput: true,
                  dateFormat: "Y-m-d",
                  enable: [
                    html += [value]
                  ],
                }
              });

              flatpickr("input[type=datepick]", config);
            }
          });

        } else {
          $('select[name="datum"]').empty();
        }
      });

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

{"1":"2021-09-27","2":"2021-09-28","3":"2021-09-29","4":"2021-09-30"} //This is the data from JSON for a particular province

尝试使用 .append() 无济于事

【问题讨论】：

请寻求How to Ask。我会从这个演示中删除 ajax 调用，模拟一个数组，然后向我们展示它在正常运行的 sn-p 中是如何工作的。
var html = [""] 和 html += [value] 没有意义。你认为那到底是在做什么？如果你正在尝试构建一个数组，你应该使用 map()
你从不使用html变量。
每次循环你都会重新分配config。循环完成后，它包含最后一个值。
尤其是[ html += [ value ] ]...你觉得这是在做什么？

标签： javascript jquery arrays

【解决方案1】：

您不需要使用$.each()。您可以使用Object.values() 获取所有对象属性的值，并将其用作enable: 属性。

$(document).ready(function() {
  $('select[name="provincie"]').on('change', function() {
    var provincie_id = $(this).val();
    if (provincie_id) {
      $.ajax({
        url: 'link/' + provincie_id,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          config = {
            inline: true,
            altInput: true,
            dateFormat: "Y-m-d",
            enable: Object.values(data),
          };
          flatpickr("input[type=datepick]", config);
        }
      });
    } else {
      $('select[name="datum"]').empty();
    }
  });
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

Flatpickr 给出错误：TypeError: e.slice is not a function。（在'e.slice()'中，'e.slice'是未定义的
您确定 API 返回的是字符串数组吗？
你能添加一个 JSON 响应的示例吗？
是的，我添加了它：{"1":"2021-09-27","2":"2021-09-28","3":"2021-09-29" ,"4":"2021-09-30"} 是 JSON 响应
这是一个对象，不是数组。

【解决方案2】：

现在您显示了从 api 返回的数据，可以不循环执行此操作。你有一个对象，你只想要对象的值。所以你可以使用Object.values()

        success: function(data) { //see data below
          var config = {
              inline: true,
              altInput: true,
              dateFormat: "Y-m-d",
              enable: Object.values(data),
            }
          });

          flatpickr("input[type=datepick]", config);
        }

【讨论】：

谢谢。唯一的问题是，在更改省选择器后，日历不会随新日期更新。