将数组从 Flask 传递到 Javascript 以创建下拉菜单选项答案

【问题标题】：Passing array from Flask to Javascript to create options for drop down menu将数组从 Flask 传递到 Javascript 以创建下拉菜单选项
【发布时间】：2015-08-08 02:46:53
【问题描述】：

我是 Flask 和 Javascript 的新手。我正在尝试上传文件并将其列之一用作下拉菜单中的选项。请纠正我的错误。

代码如下：

烧瓶：

from flask import Flask, render_template, redirect, url_for, request, flash, send_from_directory
from werkzeug import secure_filename
import os
import pandas as pd
import numpy as np
import json

UPLOAD_FOLDER = 'uploads/'
ALLOWED_EXTENSIONS = set(['csv'])

app = Flask(__name__)

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['data_file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

            data = pd.read_csv(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            names = data['some_column']
            return redirect(url_for('drop_down', names=names))
            #return render_template('drop_down.html', names=names)
    return render_template('file_upload.html')

@app.route('/meta')
def drop_down():
    return render_template('drop_down.html')

Javascript：

function my_script(){
    console.log('script called.');
    //var cars = ["Volvo","Ferrari","Audi","BMW","Mercedes","Porche","Saab","Avanti"];
    var cars = {{ names|safe }};
    console.log('cars assigned.');

    function make_drop_down(list_of_names, element_id){
        select_elem = document.getElementById(element_id)
        if(select_elem){
            for(var i = 0; i < list_of_names.length; i++) {
                var option = document.createElement('option');
                option.innerHTML = list_of_names[i];
                option.value = list_of_names[i];
                select_elem.appendChild(option);
            }
        }       
    };

    console.log("Making Drop Downs!!");
    make_drop_down(cars, 'drop_down_1');
    make_drop_down(cars, 'drop_down_2');
    console.log("Made Drop Downs!!");

};

html:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="static/drop_down.js"></script>
    <title>DROP DOWN</title>    
</head>
    <body onload="my_script()">
        <select id="drop_down_1">
            <option>Choose Option 1</option>

        </select>

        </br></br>

        <select id="drop_down_2">
            <option>Choose Option 2</option>

        </select>


    </body>
</html>

我在控制台上收到以下错误： ReferenceError: my_script 未定义

【问题讨论】：

您如何将 {{ names|safe }} 中的名称传递给您的 javascript？
看看：jinja.pocoo.org/docs/latest/templates

标签： javascript python arrays flask

【解决方案1】：

有两个问题。

第一个是你没有通过你的视图处理/meta中的汽车列表

@app.route('/meta')
def drop_down():
   return render_template('drop_down.html')

这应该看起来像这样：

@app.route('/meta')
def drop_down():
   cars = ["Volvo","Ferrari","Audi","BMW","Mercedes","Porche","Saab","Avanti"]
   return render_template('drop_down.html',
                          names=cars)

第二个问题是您的 javascript 将无法访问该列表，除非您在对函数的调用中传递它。

html

<body onload="my_script({{ names }})">

javascript

function my_script(names){
   console.log('script called.');
   var cars = names;
   ...

编辑：

处理视图的函数是需要传递数据的函数。您也可以使用上传文件的注释掉部分，该部分使用必要的数据调用render_template...，但这感觉不是一种“好”的方法。

您需要通过将数据存储在数据库中、在此函数中从文件中读取数据或将其存储在会话中来使数据可用于您的drop_down() 视图。这样您就可以将数据与模板一起传递

【讨论】：

你能解释一下为什么在 drop_down() 函数中需要汽车数组吗？我想从上传的文件中获取输入（名称）。