Django passing variables dynamically from Views.Py to Jquery

Question

I am struggling to understand this.

I have a dictionary titled alldicts that I am passing from Views in Django into the HTML. How do I then reference that dictionary to Jquery to autofill in input values in my HTML?

My code in Views.Py:

mydict1 = {
'one' : 1
'two' : 2
'three' : 3
}

mydict2 = {
'one' : 4
'two' : 5
'three' : 6
}

mydict3 = {
'one' : 7
'two' : 8
'three' : 9
}


alldicts={
'mydict1': mydict1,
'mydict2': mydict2,
'mydict3': mydict3
}

return render(request, self.template_name, alldicts)

In the HTML section of my code, I have a select dropdown with the options "mydict1","mydict2", and "mydict3". Below it I have three inputs (number of inputs will be dynamic, but wanted to give a simple example) that I want to auto fill to match the selected option. (IE if I select mydict2 in the dropdown, the inputs (#one, #two, and #three) will fill to be 4,5, and 6 respectively).

In html, if I try something like this, it doesn't work:

$("#hselect").change(function() {

var a = "{{alldicts}}";

var selectedValue = $(this).val();


$.each( a, function(idx, obj) {
   $.each( obj, function(key, value){
       if (selectedValue == idx) {                  
          $('#'+key).val(value);
       }
   });
});


}


<select id = "hselect" name="hselect" style="width: 250px;" onchange="changeoption();">
<option> mydict1 </option>
<option> mydict2 </option>
<option> mydict3 </option>
</select>

<input id='one' ><br>
<input id='two' ><br>
<input id='three' ><br>

This does not work. However if I pass the dictionary statically through the HTML, it does work. How do I pass dynamically from Views?

For example this does work:

$("#hselect").change(function() {

var a = {
'mydict1' = {'one' : 1, 'two' : 2, 'three' : 3},
'mydict2' = {'one' : 4, 'two' : 5, 'three' : 6},
'mydict3' = {'one' : 7, 'two' : 8, 'three' : 9},
};

var selectedValue = $(this).val();


$.each( a, function(idx, obj) {
   $.each( obj, function(key, value){
       if (selectedValue == idx) {                  
          $('#'+key).val(value);
       }
   });
});


}


<select id = "hselect" name="hselect" style="width: 250px;" onchange="changeoption();">
<option> mydict1 </option>
<option> mydict2 </option>
<option> mydict3 </option>
</select>

<input id='one' ><br>
<input id='two' ><br>
<input id='three' ><br>

The only thing that changes is how I pass the dictionary, mydicts, and define the variable a. How do I do this dynamically from Views.Py?

Nguyễn Vũ Thiên · Accepted Answer · 2021-04-09 02:15:32Z

1

You need ensure convert all datatype in alldicts from python object to string or number.
Change alldicts in your views.py from python dict to json format:

import json
json_alldicts = json.dumps(alldicts)

For jinja template

var a = JSON.parse('{{ json_alldicts | tojson | safe }}');
console.log(a);

For django template

var a = JSON.parse('{{ json_alldicts | safe }}');
console.log(a);

edited Apr 9, 2021 at 2:15

answered Mar 19, 2021 at 22:46

Nguyễn Vũ Thiên

8791 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MC2020 Over a year ago

The solution was I needed to convert to double quotes then parse. Thank you for this, I am beginning and this helped lead me to the solution.

Bernhard Beatus · Accepted Answer · 2021-03-19 21:00:37Z

0

The answer is quite tricky (updated my Answer)
Now its working dynamically. HTML

<div id="container"></div>
<div id="inputs"></div>

This is are your objects (console.log helps): Four dynamic I added a fourth element to the first mydict1

mydict1 = {
  'one': 1,
  'two': 2,
  'three': 3,
  'four': 4
}

mydict2 = {
  'one': 4,
  'two': 5,
  'three': 6
}

mydict3 = {
  'one': 7,
  'two': 8,
  'three': 9
}

alldicts = {
  'mydict1': mydict1,
  'mydict2': mydict2,
  'mydict3': mydict3
}

console.log('alldicts', alldicts);

These creates the dynamic select option box:

var markup = '';
markup += '<select id="hselect" name="hselect" style="width: 250px;">';
$.each(alldicts, function(idx, obj) {
  console.log('obj', idx);
  markup += '<option value="' + idx + '">' + idx + '</option>';
});

markup += '</select>';

$("#container").append(markup);

This is the changeHandler for changing the select options

var markupInputs = '';

$('#hselect').on('change', function() {
  $('#inputs').empty();
  console.log(this.value);
  var option = this.value;
  var elements = {};
  $.each(alldicts, function(idx, obj) {
    console.log('idx', idx)
    if (idx == option) {
      $.each(obj, function(idx1, obj1) {
         elements[idx1] = obj1;
      });
    }
  });
  console.log('arr2', elements);

  $.each(elements, function(index, value) {
    markupInputs += '<input id="' + index + '" value="' + value + '"></input><br>';
  });

  $("#inputs").append(markupInputs);
  markupInputs = '';
});

edited Mar 19, 2021 at 21:00

answered Mar 19, 2021 at 19:08

Bernhard Beatus

1,2161 gold badge8 silver badges8 bronze badges

3 Comments

MC2020 Over a year ago

Sorry if I did a poor job of explaining. My select fields are constant (mydict1,mydict2, and mydict3). What I am trying to dynamically change is the input value based on the chosen select field. The dictionary alldicts is passed from my Views.Py to the HTML which is where the problem occurs. How do I pass alldicts in from Views to Jquery?

Bernhard Beatus Over a year ago

I'm not familiar with Django. Maybe this post will help you stackoverflow.com/questions/31061883/… or you have to do some inline javascript

MC2020 Over a year ago

I appreciate the response.

Collectives™ on Stack Overflow

Django passing variables dynamically from Views.Py to Jquery

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related