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

Posted 2023-05-09

【中文标题】jQuery .each() 只显示最后一个或第一个值

【英文标题】：jQuery .each() only shows last or first value

【发布时间】：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();
        
      );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

"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 ] ]...你觉得这是在做什么？

【参考方案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();
    
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

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

【讨论】：

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