使用来自数据库的Json数据填充下拉列表(使用Python FLASK)

时间:2018-05-31 17:24:42

标签: javascript html json

我有一个JSON数据,我从PostgreSQL数据库检索到Flask函数,返回以下内容:

烧瓶功能:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPushButton>
#include <QVBoxLayout>
#include "amputation.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);


    QPixmap pix("/home/skanda/Desktop/D4564.png");
    ui->label_2->setPixmap(pix);
    setWindowTitle("First Aid");

    QVBoxLayout *lay = new QVBoxLayout();
    QStringList names{"Amputation", "Asthama", "Bleeding", "Burns", "Chest Pain",
                      "Drowning", "Diarrhoea", "Epilepsy", "Fainting", "Fever",
                      "Food Poisoning", "Fracture", "Head Injury", "Muscle Strain",
                     "No breathing", "Nose bleed", "Poisoning", "Snake Bites",
                      "Stroke","Sun Burn", "Testicle Pain", "Ulcer", "Child delievery",
                      "Heart Attack", "Gastric"};
    for(const QString & name: names)
    {
        QPushButton *button = new QPushButton(name);
        lay->addWidget(button);
        connect(button, &QPushButton::clicked, this, &MainWindow::on_pushButton_clicked)

    }
    ui->scrollContents->setLayout(lay);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_pushButton_clicked(){
    Amputation amp;
    amp.setModal(true);
    amp.show();
}

输出:

def Install():
    cur = conn.cursor()
    # cur.execute("""create table Install (Install varchar(300));""")
    # cur.execute("""insert into Install (Install) values ('ffr2nightly.tst');""")
    cur.execute("""select * from Install;""")
    conn.commit()
    test = {}
    count = 0
    for row in cur.fetchall():
        test[count] = row[0]
        count += 1
    return test

我正在尝试使用下拉列表

在我的HTML表单中使用此数据

HTML:

{  
   "0": "ffr2nightly.tst",
   "1": "ffr2nightly.tst",
   "2": "HealthCheckDocker.tst",
   "3": "NoInstall.tst"
}

1 个答案:

答案 0 :(得分:0)

是的,你只需要从JSON中提取值,然后使用jQuery将其解析为select元素。

//Your data
var data = {
  "0": "ffr2nightly.tst",
  "1": "ffr2nightly.tst",
  "2": "HealthCheckDocker.tst",
  "3": "NoInstall.tst"
};
//iterate through it and append to the select
Object.values(data).forEach(function(ele) {
  var opt = '<option>' + ele + '</option>';
  $('#sel').append(opt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="sel"></select>

如果要排除重复项,只需在使用此

添加选项之前检查该选项是否存在
if ($('#sel').find('option[value="' + ele + '"]').length == 0)
    $('#sel').append(opt);