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)