在ajax服务器响应时，需要更深入json，但我不能

Question

我能够让浏览器向服务器发送最初的http帖子，并且从服务器我能够向浏览器发送包含json表示对象的json。但是从这里我无法填充选择选项。

我们实际上是我，但它只有一个层次，并且在某个季节也将它们全部添加到一个选项中（至少我担心atm）。如果数据变量包含对象，则将其置于select选项中

"[object, Object], [object, Object], [object, Object]"

查看代码

    if request.is_ajax():
        selected_date = request.POST['selected_date']
        slots_on_day = Calendar.objects.filter(date=selected_date)

        data = []
        for cal in slots_on_day:
            data.append(model_to_dict(cal))
        return JsonResponse(status=200, data={'slots_on_day': data})

json结构（数据变量）

[{'id': 47, 
'date': datetime.date(2018, 3, 12), 
'timeslot_A': datetime.time(10, 0), 
'timeslot_B': datetime.time(12, 0), 
'booked': True},

{'id': 45, 
'date': datetime.date(2018, 3, 12), 
'timeslot_A': datetime.time(8, 0), 
'timeslot_B': datetime.time(10, 0), 
'booked': False}]

Ajax成功

 success: function(data){
                    $.each(data, function(key, value){
                        $('select[name=slot]').append('<option value="' + key + '">' + value2 +'</option>');
                    });
                }

这是我尝试过的其他东西

success: function(data){
                $.each(data, function(key, value){
for (var key in data) {
  $('select[name=slot]').append('<option value="' + key + '">' + value +'</option>');
}

已编辑 - Heres模板

<div class="col-6">
                            <span>Date:</span>
                            <input type="text" name="day" id="datepicker" readonly="readonly" required />
                        </div>
                        <div class="col-6">
                            <span>Time:</span>
                            <div class="input-select">
                                <select name="slot" id="display_slots" required>
                                    <option value="" selected>---------</option>
                                </select>
                            </div>
                        </div>

UPDATE

现在为了ajax的成功我有这个：

success: function(data){
                $.each(data['slots_on_day'], function(key, value){
                    $('select[name=slot]').append('<option value="' + key + '">' + value +'</option>');
                });
              }

现在这样做是为每个从0开始的附加对象添加一个值并且由1引起。因此第一个选项的值为0.第二个选项的值为1等。

每个文本总是'[object Object]'

console.log（data）输出是：

{
  "slots_on_day": [
    {
      "id": 41,
      "date": "2018-03-05",
      "timeslot_A": "08:00:00",
      "timeslot_B": "10:00:00",
      "booked": false
    },
    {
      "id": 42,
      "date": "2018-03-05",
      "timeslot_A": "08:00:00",
      "timeslot_B": "10:00:00",
      "booked": true
    },
    {
      "id": 43,
      "date": "2018-03-05",
      "timeslot_A": "10:00:00",
      "timeslot_B": "12:00:00",
      "booked": false
    },
    {
      "id": 44,
      "date": "2018-03-05",
      "timeslot_A": "10:00:00",
      "timeslot_B": "12:00:00",
      "booked": false
    }
  ] 
}

Answer 1

你觉得这样的事吗？

success: function(data){
  var $select = $('#display_slots');
  var a = data.slots_on_day;
  for (var i = 0, len = a.length; i < len; i++)
  {
    $select.append('<option value="' + a[i].id + '">' + a[i].date +'</option>');
  }

我不确定您要将哪个字段写为文本。我只是写date但你可以使用你想要的任何领域。

如果您正确发布数据，此代码有效：

var data = {
  "slots_on_day": [
    {
      "id": 41,
      "date": "2018-03-05",
      "timeslot_A": "08:00:00",
      "timeslot_B": "10:00:00",
      "booked": false
    },
    {
      "id": 42,
      "date": "2018-03-05",
      "timeslot_A": "08:00:00",
      "timeslot_B": "10:00:00",
      "booked": true
    },
    {
      "id": 43,
      "date": "2018-03-05",
      "timeslot_A": "10:00:00",
      "timeslot_B": "12:00:00",
      "booked": false
    },
    {
      "id": 44,
      "date": "2018-03-05",
      "timeslot_A": "10:00:00",
      "timeslot_B": "12:00:00",
      "booked": false
    }
  ] 
}

var $select = $('#display_slots');
var a = data.slots_on_day;
  for (var i = 0, len = a.length; i < len; i++)
  {
    $select.append('<option value="' + a[i].id + '">' + a[i].date +'</option>');
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="slot" id="display_slots" required>
                                    <option value="" selected>---------</option>
                                </select>

要格式化日期，请检查this SO question。

Answer 2

success: function(data){    
    var $select = $('#display_slots');
    $.each(data, function(i, val){
        $select.append($('<option />', { value: (i+1), text: val[i+1] }));
    });
}