Need to go one level deeper into json but am not able, upon ajax server response

Question

I am able to have the browser send the server the initial http post, and from the server I am able to send the browser the json which contains the json represented objects. But from here I am not able to populate the select options.

We'll actually I am but it is only one level deep, and also for some season add it all into one option (least of my worries atm). It places this within the select option, if the data variable contains objects

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

View Code

    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 structure (data variable)

[{'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}]

The Ajax Success

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

Here is something else I tried

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

EDITED - Heres Templates

<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

Now for the ajax success I have this:

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

now what this does is it adds a value to each of the appended objects starting at 0 and incriminating by 1. So the first option will have a value of 0. The second a value of 1 etc.

The text for each of these is always '[object Object]'

The console.log(data) output is:

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

Have you tried to debug the success response and see what is the type & value of `key`,`value`,`value2` variables? — palaѕн, Mar 02 '18 at 06:06
@palaѕн Yes! I want to get key2, value2 from value. But im a javascript noob and not sure how. Any time I tried, it just does nothing — questnofinterest, Mar 02 '18 at 06:08
currently the key='slots_on_day' and value=an array of dictionaries — questnofinterest, Mar 02 '18 at 06:11
@Vaibhav It outputs an object. with a key 'slots_on_day' and a value containing an array of Calendar objects — questnofinterest, Mar 02 '18 at 06:28
@questnofinterest Post console output for `console.log(data)` to your question. — Makla, Mar 02 '18 at 06:47

Makla · Accepted Answer · 2018-03-02T06:58:25.647

1

Did you think something like this?

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

I am not sure which field you want to write as text. I just write date but you can use any field you want.

If you correctly post data this code works:

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>

For formatting date, check this SO question.

edited Mar 02 '18 at 06:58

answered Mar 02 '18 at 06:22

Makla

7,975
9
52
118

Does not work. Nothing appears in the time slot input select – questnofinterest Mar 02 '18 at 06:26
1

Before `for` write `console.log(data)` as Vaibhav suggested and edit your question with correct output. Apparently your `json structure (data variable)` is incorrect. – Makla Mar 02 '18 at 06:35
I have updated my question with console.log(data)... also I have got some more progress. using another success javascript – questnofinterest Mar 02 '18 at 06:57
1

@questnofinterest And I updated the code and prepare Snippet. It should work. – Makla Mar 02 '18 at 06:58
Thank you oh so very much! I appreciate it a lot! – questnofinterest Mar 02 '18 at 07:02
Now say I choose another date with the first field, which is used to determine what is shown in the select field. And then i choose something else. Currently it just keeps appending more and more fields to the select field... But I'd like to ideally clear them out on each change. – questnofinterest Mar 02 '18 at 07:07
1

`$('#display_slots option').slice(1).remove();` from [this](https://stackoverflow.com/questions/17722433/remove-all-child-elements-from-table-except-for-first). – Makla Mar 02 '18 at 07:17

score 1 · Answer 2 · answered Mar 02 '18 at 06:37

1

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

answered Mar 02 '18 at 06:37

Vaibhav

916
6
23

each time it just adds an option with the value of slots_on_day1 in every single case no matter the input of the date. And for the text it is empty – questnofinterest Mar 02 '18 at 06:41
check console.log(i, val,val[i+1]) inside $.each – Vaibhav Mar 02 '18 at 07:54

Need to go one level deeper into json but am not able, upon ajax server response

2 Answers2