Python 从Flask中的pandas创建json.dumps，并使用级联下拉列表生成视图_Python_Jquery_Html_Pandas_Flask

Python 从Flask中的pandas创建json.dumps，并使用级联下拉列表生成视图

python jquery html pandas flask

Python 从Flask中的pandas创建json.dumps，并使用级联下拉列表生成视图,python,jquery,html,pandas,flask,Python,Jquery,Html,Pandas,Flask,我有一个包含汽车数据的数据框。我需要在pandas dataframe中执行groupby唯一值，并在Flask视图中返回输出，这将允许用户选择汽车的制造商和型号我所拥有的是编辑： cars = carsDF.groupby('manufacturer')['model'].unique().to_json() 该代码的输出如下所示： { "BMW": ["118", "320"], "Citroen": ["c3", "ax"], "Hyundai": ["tu

我有一个包含汽车数据的数据框。我需要在pandas dataframe中执行groupby唯一值，并在Flask视图中返回输出，这将允许用户选择汽车的制造商和型号

我所拥有的是

编辑：

cars = carsDF.groupby('manufacturer')['model'].unique().to_json()

该代码的输出如下所示：

{
    "BMW": ["118", "320"],
    "Citroen": ["c3", "ax"],
    "Hyundai": ["tucson"],
    "Mazda": ["3"],
    "Mercedes-Benz": ["c-klasa"],
    "Opel": ["vectra", "astra"],
    "Renault": ["scenic", "megane", "twingo"],
    "VW": ["touran"],
    "Volvo": ["v40"]
}

Flask应用程序如下所示：

@app.route('/index')
def index():    
    cars =  carsDF.groupby('manufacturer')['model'].unique().to_json()   
    return render_template('index.html', cars=cars)

到目前为止，我的观点只是基本的 index.html：

<html>
    <body>
        <h1>List of cars:</h1>
        <div><p>{{ cars }} </b></p></div>
    </body>
</html>


车辆清单：
{{cars}}

它按原样播种汽车。我需要以index.html的格式呈现它，这将允许我构建级联列表。类似于用户选择制造商然后选择型号的地方。

我已经设法解决了它。以下是带有数据集的jquery：

$(document).ready(function() {
    var data = {"alfaromeo":["mito","156","147","giulietta","159","166","146"],"audi":["a3","a4","a6","a5","80","a1","q3","a8","q5"],"bmw":["320","116","x3","316","318","118","530","x1","520","x5","525","330","120","323","serija 1"],"chevrolet":["spark","lacetti","captiva","aveo","cruze"],"citroen":["c4","c4 grand picasso","c3","c5","c4 picasso","xsara","berlingo","c2","xsara picasso","saxo","ds5","c1"],"fiat":["brava","bravo","panda","grande punto","stilo","punto","punto evo","doblo","500","tipo","uno","coupe"],"ford":["c-max","fiesta","focus","mondeo","fusion","ka","escort"],"honda":["civic","accord","cr-v"],"hyundai":["getz","i10","i20","atos","i30","coupe","elantra","accent","santa fe","ix35","tucson"],"kia":["rio","pro_cee'd","sportage","cee'd","pride","sorento"],"mazda":["3","2","323 f","626","6","cx-5","323","premacy","5"],"mercedes":["a-klasa","c-klasa","e-klasa","b-klasa","124"],"mercedes-benz":["e-klasa","clk-klasa","c-klasa","s-klasa","190","a-klasa","b-klasa","c t-model","ml-klasa","w 124","124"],"nissan":["qashqai","x-trail","note","primera","micra","juke","almera"],"opel":["corsa","astra","zafira","meriva","vectra","insignia","mokka","tigra","combo","astra gtc","kadett"],"peugeot":["308","207","206","306","106","307","208","406","508","407","partner","3008","405"],"renault":["thalia","clio","scenic","grand scenic","kangoo","captur","megane grandtour","megane","laguna","5","megane break","twingo","modus","kadjar","megane classic","espace","megane scenic","megane coupe","megane sedan"],"seat":["toledo","leon","ibiza","altea","cordoba"],"skoda":["fabia","octavia","120","superb","felicia","rapid"],"smart":["fortwo"],"toyota":["corolla","yaris","auris","avensis","rav 4","land cruiser"],"vw":["polo","golf v","golf iv","golf vii","passat","golf vi","jetta","passat variant","caddy","sharan","tiguan","golf variant","golf ii","vento","golfplus","golf iii","bora","touran","touareg","up!"]};
    var firstSelect = $('<select id="firstSelect"></select>');
    var secondSelect = $('<select id="secondSelect"> </select>');
    $.each(data, function(item, key) {
        firstSelect.append('<option >' + item + '</option>');
    });
    $("#container").html(firstSelect);
    $("#firstSelect").on("change", function(e) {
        var item;
        var selected = $(this).val();
        if (selected === "alfaromeo") {
            item = data[selected];
        } else {
            item = data[selected];
        }
        $(secondSelect).html('');
        $.each(item, function(item, key) {
            secondSelect.append('<option >' + key + '</option>');
        });
    });

    $("#container").append(secondSelect);


});

$（文档）.ready（函数（）{
var数据={“阿尔法罗密欧”：[“米托”、“156”、“147”、“朱利埃塔”、“159”、“166”、“146”]、“奥迪”：[“a3”、“a4”、“a6”、“a5”、“80”、“a1”、“q3”、“a8”、“q5”]、“宝马”：[“320”、“116”、“x3”、“316”、“318”、“118”、“530”、“x1”、“520”、“x5”、“525”、“330”、“120”、“323”、“塞里娅1”]、“雪佛兰”]、“火花”、“拉塞蒂”、“卡皮塔”、“阿维奥”、“克鲁兹”、“雪铁龙”：“c4”、“c4”、“大索”、“c4”、“c3”、“毕加索”、“c4”、“c4”、“c4”、“毕加索”，“xsara”、“贝林戈”、“c2”、“xsara毕加索”、“萨克索”、“ds5”、“c1”]、“菲亚特”：[“布拉瓦”、“布拉沃”、“熊猫”、“大平托”、“斯蒂洛”、“平托”、“平托埃沃”、“多布罗”、“500”、“提波”、“乌诺”、“轿跑车”]、“福特”：[“c-max”、“嘉年华”、“福克斯”、“蒙迪欧”、“融合”、“ka”、“护卫”]、“本田”：[“思域”、“雅阁”、“cr-v”]、“现代”[“getz”、“i10”、“i20”、“atos”、“i30”、“轿跑车”、“伊兰特”、“埃兰特”、“口音”、“圣达菲”“，”ix35“，”图森“，”起亚“：[”里约“，”pro_cee'd“，”sportage“，”cee'd“，”骄傲“，”索兰托“，”马自达“：[”3“，”2“，”323 f“，”626“，”6“，”cx-5“，”323“，”普雷曼西“，”梅赛德斯“：[”a-klasa“，”c-klasa“，”c-klasa“，”e-klasa“，”b-klasa“，”b-klasa“，”124“，”梅赛德斯-奔驰“，”e-klasa“，”e-klasa“，”clk-klasa“，”c-klasa“，”c-klasa“，”c-klasa“，”c-klasa“，“x-trail”、“note”、“primera”、“micra”、“juke”、“almera”]、“opel”：[“corsa”、“astra”、“zafira”、“meriva”、“vectra”、“insignia”、“mokka”、“tigra”、“combo”、“astra gtc”、“kadett”]、“peugeot”]：[“308”、“207”、“206”、“306”、“106”、“307”、“208”、“406”、“508”、“407”、“partner”、“3008”、“405”]、“雷诺”：[“thalia”、“clio”、“Scient”、“grand Scient”、“grand Scient”、“kangoo”、“captur”、“megane grandtour”、”梅根、拉古娜、5、梅根休息、twingo、modus、kadjar、梅根经典、espace、梅根风景区、梅根轿跑车、梅根轿车、“座椅”[“托莱多”、“莱昂”、“伊维萨”、“阿尔泰”、“科尔多瓦”、“斯柯达”：[“法比亚”、“奥克塔维亚”、“120”、“卓越”、“费莉西亚”、“快速”]、“智能”[“福特沃”]、“丰田”[“花冠”、“雅利斯”、“奥里斯”、“复仇女神”、“rav 4”、“陆地巡洋舰”]、“大众”[“波罗”、”高尔夫v型、高尔夫iv型、高尔夫vii型、帕萨特型、高尔夫vi型、捷达型、帕萨特变型、球童型、沙兰型、提瓜型、高尔夫变型、高尔夫ii型、文托型、高尔夫PLUS型、高尔夫iii型、博拉型、图兰型、途锐型、up型！】；
var firstSelect=$（''）；
var secondSelect=$（''）；
$。每个（数据、功能（项、键）{
firstSelect.append（“”+项+“”）；
});
$（“#容器”）.html（第一选择）；
$（“#firstSelect”）。关于（“更改”，函数（e）{
var项目；
所选变量=$（this.val（）；
如果（选定==“阿尔法罗密欧”）{
项目=数据[选定]；
}否则{
项目=数据[选定]；
}
$（secondSelect.html（“”）；
$。每个（项目、功能（项目、键）{
secondSelect.append（“”+键+“”）；
});
});
$（“#容器”）.append（secondSelect）；
});