Displaying python list as dropdown on a flask web application

Question

I am trying to display a dropdown menu in a flask web application. I pass a python list as an input for the dropdown menu and I want to recieve the selected item back as the output on click of a submit button.

Here's my simple python backend:

from flask import Flask, render_template, json
app = Flask(__name__)

@app.route('/')
def index():    
    name = json.dumps(['Red', 'Blue', 'Orange', 'Yellow', 'Green'])
    return render_template('index2.html', name=name)

if __name__ == "__main__":
    app.run(debug=True, use_reloader=False)

And here's the frontend (index2.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Report Generation</title>
</head>
<body>  
    <select id="selectvalue">
    </select>  
    <script>
        var selectvalue = document.getElementById("selectvalue");
        // const test = {{ name | tojson | safe }}
        const test = JSON.parse("{{name}}");
        for (var i=0;i<test.length;i++)
        {
            var selection = document.createElement('OPTION');
            var txt = document.createTextNode(test[i]);
            selection.appendChild(txt);
            selection.setAttribute("value", test[i]);
            selectvalue.insertBefore(selection, selectvalue.lastChild);
        }
    </script>
</body>
</html>

I tried two methods, the second line (when uncommented) within tag is giving me this error: Uncaught SyntaxError: Unexpected token '{'

and trying the third line gives me this error: Uncaught SyntaxError: Expected property name or '}' in JSON at position 1 at JSON.parse ()

Here's the output I want: dropdown

Also, how do I recieve the selected item back to flask backend on click of a button? Thanks in advance!

Thanks for responding to this. I tried this solution but it actually gives an output not what I would like - Imagine the square brackets as the dropdown button here - [{{colours}}] — Subham
– Subham, Commented Apr 25, 2023 at 4:17

Elie Saad · Accepted Answer · 2023-04-24 17:11:15Z

1

Since you're using flask, take advantage of the jinja template to fill the dropdwon / select. first send a list to the template rather than a json string. loop over the items and write the template. here is your modified code.

from flask import Flask, render_template, json
app = Flask(__name__)

@app.route('/')
def index():    
    name = ['Red', 'Blue', 'Orange', 'Yellow', 'Green']
    return render_template('index2.html', name=name)

if __name__ == "__main__":
    app.run(debug=True, use_reloader=False)

And here is the template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Report Generation</title>
</head>
<body> 

    <select id="selectvalue">
        {% for n in name %}
            <option value="{{n}}">{{ n }}</option>
        {% endfor %}

    </select>  

</body>
</html>

if you want to send the value back, you have to use a form and call a post route with the selected value. This also can be done using the jinja2 template and a flask route.

answered Apr 24, 2023 at 17:11

Elie Saad

6045 silver badges10 bronze badges

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

3 Comments

Subham Over a year ago

Thanks for responding. Although I had tried your solution at first but the dropdown isn't the way I want. Output looks like this, Imagine the square brackets are dropdown button and within that you have this: [{{n}}]

Elie Saad Over a year ago

Just copy and paste the code as it is. It is running on my side.

Subham Over a year ago

Not working for me. I cleared the cache, tried different browsers and incognito mode as well :(

Collectives™ on Stack Overflow

Displaying python list as dropdown on a flask web application

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related