如何从 json 中获取数字并相应地添加 Flask-WTForms 字段

Question

我正在构建一个对象检测应用程序。它检测给定图像中的平面并将坐标写入字典：

    planes = 
{'Plane 1': {'Plane Coordinates': [20.0, 20.0, 551.0, 52.0], 'Plane Type': 1, 'Points': [2]}, 
'Plane 2': {'Plane Coordinates': [502.0, 425.0, 741.0, 713.0], 'Plane Type': 7, 'Points': [2]}, 
'Plane 3': {'Plane Coordinates': [55.0, 669.0, 310.0, 736.0], 'Plane Type': 2, 'Points': [2]}, 
'Plane 4': {'Plane Coordinates': [503.0, 1194.0, 805.0, 1222.0], 'Plane Type': 5, 'Points': []}, 
'Plane 5': {'Plane Coordinates': [56.0, 1240.0, 391.0, 1268.0], 'Plane Type': 8, 'Points': []}}

但这里是棘手的部分：

我希望用户向 Points 键添加值。因此，当检测完成时，我想创建一个表单，人们可以在其中向检测到的平面添加点。

我决定用Flask WTForms（不过我可以根据建议改一下，也许我可以用JS？）我只是不知道如何根据检测到的数字复制相同的字段飞机。

所以我想出了这样的解决方案：

我将字典保存为 JSON 文件。然后在forms.py 中使用以下代码打开它：

json_file_path = "planes.json"

with open(json_file_path, 'r') as j:
     contents = json.loads(j.read())

试试这个：

class PlanesValue(Form):
for key in contents:
    plane = FieldList(StringField(key), min_entries=1)
submit = SubmitField('Submit')

但问题是它只是将最后一个Plane 即Plane 5 呈现为唯一的字段。

我可以理解，因为它循环遍历内容中的键，所以它只是想出字典中的最后一项，我不知道如何解决这个问题。

另外我不知道如何将这些值一一添加到表单验证上面的planes 字典中：/

如果有任何帮助，我将不胜感激。提前致谢。

编辑： 我想要达到的目标： 我希望 Flask WTForms 查看planes 字典，而不是此处的“静态字段”，获取标签并生成：“平面 1、平面 2、平面 3、平面 4、平面 5”

Answer 1

如果我了解您遇到的问题，我想我正在自己的应用程序中做同样的事情。在您的 Python 事件处理器中，您需要根据某个事件添加“平面”字段的实例。在这里，我使用我称之为“过滤器”的东西来做到这一点。

这是我的表单的一部分（我已经从我的实际应用程序中简化了一点）...

class QueryDefFormRow(FlaskForm):
    tbl_col_name = SelectField(label='Column', render_kw={'title': "Column to filter on",'class': "form-control"})
    operator = SelectField(label='Operator', render_kw={'title': "Operation to perform",'class': "form-control"},
                           choices=[('=', '='), ('<', '<'), ('<=', '<='), ('>', '>'), ('>=', '>=')])
    value = StringField(label='Value', render_kw={'title': 'Value to filter against.','class': "form-control"})
    btn_delete = ImageButtonField(label='Delete',render_kw={'class': "btn btn-dark", 'title': 'Remove this filter', 'image_class':"fas fa-trash fa-sm"})

class QueryDefForm(FlaskForm):
    qry_def = FieldList(unbound_field=FormField(form_class=QueryDefFormRow))
    btn_add_filter = SubmitField(label='Add Filter', render_kw={'class': "btn btn-primary btn-fill btn-space",
                                                                'title': 'Add another filter'})

这是我处理点击 btn_add_filter 的 Python...

if form.btn_add_filter.data:  # User pressed the add row button
    form.qry_def.append_entry()

如您所见，当用户点击添加过滤器按钮时，我添加了另一个过滤器行。 append_entry() 方法可能是您需要的关键部分。 结果在屏幕上看起来像这样......