Fill option with Flask data - Front x Backend

Question

I have little knowledge in frontend and I’m needing to do the following:

In my Backend I have a function which I run in python and which returns a list according to print.

app = Flask(__name__)

@app.route('/')
def info():
    return 'Navegar para os dados'

@app.route('/Teste')
def mensagem():
    fd='var_fd'
    dt='var_dt'

    _engine = sqlalchemy.create_engine("minha_string_de_conexao")
    sql = """
    select data 
        from minha_tabela
    where codigo like '%{0}%'
    and data={1!r}
    order by 1 desc; 
    """.format(fd, dt)

    pos = pd.read_sql_query(sql,_engine)

    value = str(pos.iloc[0:]['data'].tolist())
    return str(value)

if __name__ == '__main__':
    app.run()

<div class="col-md-12" align="right" style="font-size:12px;color:black;margin-left:10ox;margin-bottom:15px;">
    <select class="form-control" style="width:120px">
    <option selected value="">hh:mm:ss</option>
</div>

I need the feedback of that data to be populated in the combobox. I believe that with jquery is a good option, however, I am not able to realize this demand.

As I mentioned initially, I don’t have much knowledge in front. Grateful!

Could someone help me?

Answer 1

You can use a simple AJAX with jQuery. Put a id in the select to have a reference:

<select id="horas" class="form-control" style="width:120px">
   <option selected value="">hh:mm:ss</option>
</select>

AJAX:

<script>

    $(document).ready(function(){

       $.get("http://127.0.0.1/Teste", function(data){

          var opts = '';

          $.each(data, function(i, v){

             opts += '<option value="'+ v +'">'+ v +'</option>';

          });

          $("#horas").append(opts);

       }, "json");

    });

</script>

As the return will come an array in the form of a string, the option "json" will convert the string to array.