jQuery .each() only shows last or first value-CodePudding

Many questions like mine on Stack, but I just can't get it to work with those answers.

User picks a province and then picks an available date from flatpickr calendar. The available dates come from JSON array and need to be inserted in the config as enable: ["2021-08-05","2021-05-03", etc.]. However, I only get the first or with some tweaks last available date from the JSON array. What am I doing wrong and how to solve it with commas in between like documentation requires.

$(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

Tried using .append() to no avail

CodePudding user response：

You don't need to use $.each(). You can use Object.values() to get the values of all the object properties, and use that as the enable: property.

$(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>

CodePudding user response：

Now that you shown data returned from the api, it is possible to do this no looping. You have an object and you just want the values of the object. So you can use 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);
        }