Создайте json.dumps из панд во Flask и создайте представление с помощью каскадного выпадающего списка - PullRequest
Новая
       7

Создайте json.dumps из панд во Flask и создайте представление с помощью каскадного выпадающего списка

0 голосов
/ 14 октября 2019

У меня есть датафрейм, который содержит данные об автомобилях. Мне нужно сделать групповые уникальные значения в кадре данных панд и вернуть вывод в представлении 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>

Он сеет список машин как есть. Мне нужно представить его в index.html в формате, который позволит мне создать каскадный список ... что-то вроде this , где пользователи выбирают производителя, а затем модель.

1 Ответ

0 голосов
/ 15 октября 2019

Мне удалось решить это. Вот 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...