创建json.dumps文件从Flask中的pandas生成具有级联下拉列表的视图

2024-06-16 12:28:06 发布

您现在位置：Python中文网/ 问答频道 /正文
9259 3

我有一个包含汽车数据的数据框。 我需要在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"]
}

所以烧瓶应用程序看起来是这样的：

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

到目前为止，我的观点只是基本的 索引.html地址：

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

它按原样播种汽车。 我需要把它交出来索引.html格式允许我建立级联列表..类似于this的东西，用户可以在其中选择制造商，然后选择型号。你知道吗


Tags： to数据用户jsonindexmodelhtmlcars
1条回答
网友
1楼 · 发布于 2024-06-16 12:28:06

我已经设法解决了。 以下是带有数据集的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);


});

JSFIDDLE DEMO

相关问题 更多 >

    编程相关推荐