需要更深入地了解 json，但在 ajax 服务器响应时无法做到

Question

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

我们实际上会是我，但它只有一个层次深，而且在某些季节将其全部添加到一个选项中(我最不担心的 atm)。如果数据变量包含对象，则将其放在选择选项中

"[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}]

阿贾克斯的成功

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

已编辑 - 此处模板

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

更新

现在对于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 等。

其中每个的文本始终是"[对象对象]">

控制台.log(数据)输出为：

{
"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>

有关格式化日期，请检查此SO问题。

Answer 2

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