Populate dropdown from MySQL Database Python

Question

I have a Flask backend with MySQL and need to pull values from a table to display in a dropdown.

I have a table with single values like Banana, Apple, Orange, etc.

Inside my html code, the option shows up if a user selects another dropdown (which is hard-coded) so the code looks like this:

$(function() {
        $("#inputType").change(function() {
            var myform = "<div id=\"newForm\">"
            +"<label for=\"inputFruit\">Fruit:</label>"
            +"<select class=\"form-control\" id=\"inputFruit\" required>"
            +"<option></option>"
            +"</select>"
            if ($("#inputType").val() == "fruits") {
                $(myform).insertBefore("#btnSignUp");
            } else {
                $("#newForm").remove();
            }

Inside my flask app:

@app.route('/getFruits') # gets my fruits as a list and returns

Where do I add code so that the values I get from /getFruits is put into the option in the HTML?

Tiny.D · Accepted Answer · 2017-04-17 04:35:51Z

1

You can pass the context data (fruits list) into javascript code of your template, use JSON will meet your requirement:

Your View:

import json

@app.route('/getFruits')
def my_view():
    data = ['Banana', 'Apple', 'Orange', 'Pear', 'Watermalon'] # you can get list from your DB instead
    return render_template('yourtemplate.html', data=json.dumps(data))

Your Template:

$(function() {
        $("#inputType").change(function() {
            var myform = "<div id=\"newForm\">"
            +"<label for=\"inputFruit\">Fruit:</label>"
            +"<select class=\"form-control\" id=\"inputFruit\" required>"
            {% for item in data %}
            +"<option>{{ item|safe }}</option>"
            {% endfor %}
            +"</select>"
            if ($("#inputType").val() == "fruits") {
                $(myform).insertBefore("#btnSignUp");
            } else {
                $("#newForm").remove();
            }

answered Apr 17, 2017 at 4:35

Tiny.D

6,5562 gold badges18 silver badges20 bronze badges

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

4 Comments

user1883614 Over a year ago

Thank you for this, what if I have two dropdowns? If I had a data1 and data2 inside of my_view?

Tiny.D Over a year ago

@user1883614 It will be similar, just add one more variable, and pass the variable in the render_template('yourtemplate.html', data1=json.dumps(data1), data2=json.dumps(data2)), after that in your template, you can for loop data1 and data2 separately, and assign the variables into two dropdown Correspondingly.

Tiny.D Over a year ago

Basically, you can render a template with the given context (the variables that should be available in the context of the template), please refer to Template Rendering. You can pass multiple variables to template, just make sure your variable can be "understood" by javascript.

Iron Fist Over a year ago

@Tiny.D, you should not be using json with Flask, instead use jsonify which is provided by Flask itself, more secure.

Collectives™ on Stack Overflow

Populate dropdown from MySQL Database Python

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related