How to pass dictionary values from jinaja template to javascript

by

I need to display a size drop down in jinja template and on change of option, I want to display an image from the dictionary. I am passing the entire dictionary to a javascript function but getting the value by key in js file returns individual characters rather than value. It appears js function is not treating result as dictionary. Any help regarding this would be greatly appreciated.

 <div class="single-product-form">
    <form action="index.html">
       <label for="size">Choose size</label>
            <select name="colours" onchange="displayTryImg(this)">
              {% for sizekey, sizevalue in product.sizes.items() %}
                <option value="{{ sizevalue }}" SELECTED>{{ sizevalue.product_size }}</option>
              {% endfor %}     
            </select>
           <div class="tray-image"><img  id="tray-img" src=""></div>
      </form>
                         
 </div>

Java script function looks like this

 function displayTryImg(size){
    var result = size.value;
    console.log('result '+result)
    for(var key in result){
        console.log('val : '+result[key])  // This prints individual characters rather
    }
   document.getElementById("tray-img").src="/static/images/"+result['size_image']; // undefined
}

Console log output

result {'size_id': 3, 'product_size': 'Medium Tray', 'product_quantity': 2, 'size_description': 'Medium Tray usually enough for 3 people', 'size_image': 'tray.jpg'}
custom.js:76 val : {
custom.js:76 val : '
custom.js:76 val : s
custom.js:76 val : i
custom.js:76 val : z
custom.js:76 val : e
custom.js:76 val : _
custom.js:76 val : i
custom.js:76 val : d
custom.js:76 val : '
custom.js:76 val : :
custom.js:76 val :  
custom.js:76 val : 3
custom.js:76 val : ,
custom.js:76 val :  
custom.js:76 val : '
custom.js:76 val : p
custom.js:76 val : r
custom.js:76 val : o
custom.js:76 val : d
custom.js:76 val : u
custom.js:76 val : c
custom.js:76 val : t
custom.js:76 val : _
custom.js:76 val : s
custom.js:76 val : i
custom.js:76 val : z
custom.js:76 val : e
custom.js:76 val : '
custom.js:76 val : :
custom.js:76 val :  
custom.js:76 val : '
custom.js:76 val : M
custom.js:76 val : e
custom.js:76 val : d
custom.js:76 val : i
custom.js:76 val : u
custom.js:76 val : m
custom.js:76 val :  
custom.js:76 val : T
custom.js:76 val : r
custom.js:76 val : a
custom.js:76 val : y
custom.js:76 val : '
custom.js:76 val : ,
custom.js:76 val :  
custom.js:76 val : '
custom.js:76 val : p
custom.js:76 val : r
custom.js:76 val : o
custom.js:76 val : d
custom.js:76 val : u
custom.js:76 val : c
custom.js:76 val : t
custom.js:76 val : _
custom.js:76 val : q
custom.js:76 val : u
custom.js:76 val : a
custom.js:76 val : n
custom.js:76 val : t
custom.js:76 val : i
custom.js:76 val : t
custom.js:76 val : y
custom.js:76 val : '
custom.js:76 val : :
custom.js:76 val :  
custom.js:76 val : 2
custom.js:76 val : ,
custom.js:76 val :  
custom.js:76 val : '
custom.js:76 val : s
custom.js:76 val : i
custom.js:76 val : z
custom.js:76 val : e
custom.js:76 val : _
custom.js:76 val : d
custom.js:76 val : e
custom.js:76 val : s
custom.js:76 val : c
custom.js:76 val : r
custom.js:76 val : i
custom.js:76 val : p
custom.js:76 val : t
custom.js:76 val : i
custom.js:76 val : o
custom.js:76 val : n
custom.js:76 val : '
custom.js:76 val : :
custom.js:76 val :  
custom.js:76 val : '
custom.js:76 val : M
custom.js:76 val : e
custom.js:76 val : d
custom.js:76 val : i
custom.js:76 val : u
custom.js:76 val : m
custom.js:76 val :  
custom.js:76 val : T
custom.js:76 val : r
custom.js:76 val : a
custom.js:76 val : y
custom.js:76 val :  
custom.js:76 val : u
custom.js:76 val : s
custom.js:76 val : u
custom.js:76 val : a
2custom.js:76 val : l
custom.js:76 val : y
custom.js:76 val :  
custom.js:76 val : e
custom.js:76 val : n
custom.js:76 val : o
custom.js:76 val : u
custom.js:76 val : g
custom.js:76 val : h
custom.js:76 val :  
custom.js:76 val : f
custom.js:76 val : o
custom.js:76 val : r
custom.js:76 val :  
custom.js:76 val : 3
custom.js:76 val :  
custom.js:76 val : p
custom.js:76 val : e
custom.js:76 val : o
custom.js:76 val : p
custom.js:76 val : l
custom.js:76 val : e
custom.js:76 val : '
custom.js:76 val : ,
custom.js:76 val :  
custom.js:76 val : '
custom.js:76 val : s
custom.js:76 val : i
custom.js:76 val : z
custom.js:76 val : e
custom.js:76 val : _
custom.js:76 val : i
custom.js:76 val : m
custom.js:76 val : a
custom.js:76 val : g
custom.js:76 val : e
custom.js:76 val : '
custom.js:76 val : :
custom.js:76 val :  
custom.js:76 val : '
custom.js:76 val : t
custom.js:76 val : r
custom.js:76 val : a
custom.js:76 val : y
custom.js:76 val : .
custom.js:76 val : j
custom.js:76 val : p
custom.js:76 val : g
custom.js:76 val : '
custom.js:76 val : }
:8000/static/images/undefined:1 
GET http://localhost:8000/static/images/undefined 404 (NOT FOUND)

  • how is that related to jinja? Just have some page JS that adds an eventListener to the drop down? (also, don’t use the onchange html attribute, that’s been the bad way to do this for years now. On that note, don’t use var either, use either let or const, especially in a loop: var is function scoped, not block scoped like the normal let and const variable keywords)

    – 




  • How is it not related to Jinja @Mike’Pomax’Kamermans? OP is getting a string as {{ dict }} is casting it to string implicitly.

    – 




  • You want either to split every properties in data-* properties of the option, e.g. data-size-image="{{ size_value.size_image }}" or make a JSON string out of your dictionary then use JSON.parse() in your Javascript. But basically have to understand that Jinja and JS are two different languages and that you cannot pass data structure that easily from one to the other.

    – 




Leave a Comment