javascript - 如何使用 javascript 和基于 API 的 json 数据创建动态 html 表单？
问题描述
我有一个对象列表作为我从 API 调用中获取的输入参数，如下所示。
我想创建一个带有提交按钮的表单。
data =
[
{
"test_param":{
"multiple":false,
"help":"Data plotting method",
"display":"None",
"optional":false,
"argument":"",
"value":"HeatMap",
"label":"Data plotting method",
"is_dynamic":false,
"textable":false,
"model_class":"SelectToolParameter",
"hidden":false,
"refresh_on_change":true,
"type":"select",
"options":[
[
"Heat Map",
"HeatMap",
false
],
[
"Box Plot",
"BoxPlot",
false
],
[
"Scatter Plot",
"ScatterPlot",
false
],
[
"Word Cloud",
"WordCloud",
false
]
],
"name":"Plot"
},
"model_class":"Conditional",
"cases":[
{
"model_class":"ConditionalWhen",
"value":"HeatMap",
"inputs":[
{
"multiple":false,
"help":"Tabular data file",
"optional":false,
"argument":"--InFile",
"value":"None",
"label":"Input file",
"is_dynamic":false,
"extensions":[
"tabular"
],
"edam":{
"edam_data":[
"data_0006"
],
"edam_formats":[
"format_3475"
]
},
"model_class":"DataToolParameter",
"hidden":false,
"refresh_on_change":true,
"type":"data",
"options":{
"hdca":[
],
"hda":[
]
},
"name":"InFile"
},
{
"help":"Column name that contains index as row/sample names ",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--IndexColumn",
"value":"Index",
"label":"Index Column",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"IndexColumn"
},
{
"help":"A label that describes x axis",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--x_label",
"value":"x-axis",
"label":"Label for x-axis",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"x_label"
},
{
"help":"A label that describes y axis",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--y_label",
"value":"y-axis",
"label":"Label for y-axis",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"y_label"
}
]
},
{
"model_class":"ConditionalWhen",
"value":"BoxPlot",
"inputs":[
{
"multiple":false,
"help":"Tabular data file",
"optional":false,
"argument":"--InFile",
"value":"None",
"label":"Input file",
"is_dynamic":false,
"extensions":[
"tabular"
],
"edam":{
"edam_data":[
"data_0006"
],
"edam_formats":[
"format_3475"
]
},
"model_class":"DataToolParameter",
"hidden":false,
"refresh_on_change":true,
"type":"data",
"options":{
"hdca":[
],
"hda":[
]
},
"name":"InFile"
},
{
"help":"Name of the feature (column name)",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--Features",
"value":"Feature",
"label":"Feature name",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"Feature"
},
{
"help":"Name of the column that contains class label",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--Label",
"value":"class label",
"label":"Class label column",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"Label"
}
]
},
{
"model_class":"ConditionalWhen",
"value":"ScatterPlot",
"inputs":[
{
"multiple":false,
"help":"Tabular data file",
"optional":false,
"argument":"--InFile",
"value":"None",
"label":"Input file",
"is_dynamic":false,
"extensions":[
"tabular"
],
"edam":{
"edam_data":[
"data_0006"
],
"edam_formats":[
"format_3475"
]
},
"model_class":"DataToolParameter",
"hidden":false,
"refresh_on_change":true,
"type":"data",
"options":{
"hdca":[
],
"hda":[
]
},
"name":"InFile"
},
{
"test_param":{
"multiple":false,
"help":"Scatter Plot type 2D or 3D.",
"display":"None",
"optional":false,
"argument":"",
"value":"2D",
"label":"Scatter Plot type",
"is_dynamic":false,
"textable":false,
"model_class":"SelectToolParameter",
"hidden":false,
"refresh_on_change":true,
"type":"select",
"options":[
[
"2D",
"2D",
false
],
[
"3D",
"3D",
false
]
],
"name":"SelectPlot"
},
"model_class":"Conditional",
"cases":[
{
"model_class":"ConditionalWhen",
"value":"2D",
"inputs":[
{
"help":"Feature column name",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--RotationX",
"value":"feature1",
"label":"First feature",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"Features1"
},
{
"help":"Feature column name",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--RotationY",
"value":"feature2",
"label":"Second feature",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"Features2"
}
]
},
{
"model_class":"ConditionalWhen",
"value":"3D",
"inputs":[
{
"help":"Feature column name",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--RotationX",
"value":"feature1",
"label":"First feature",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"Features1"
},
{
"help":"Feature column name",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--RotationY",
"value":"feature2",
"label":"Second feature",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"Features2"
},
{
"help":"Feature column name",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--FigHight",
"value":"feature3",
"label":"Third feature",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"Features3"
}
]
}
],
"type":"conditional",
"name":"PlotType"
},
{
"help":"Name of the column that contains class label",
"area":false,
"datalist":[
],
"optional":false,
"argument":"--Label",
"value":"class label",
"label":"Class label column",
"is_dynamic":false,
"model_class":"TextToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"text",
"name":"Label"
}
]
},
{
"model_class":"ConditionalWhen",
"value":"WordCloud",
"inputs":[
{
"multiple":false,
"help":"Fasta file with peptides",
"optional":false,
"argument":"--InFile",
"value":"None",
"label":"Input file",
"is_dynamic":false,
"extensions":[
"fasta"
],
"edam":{
"edam_data":[
"data_2044"
],
"edam_formats":[
"format_1929"
]
},
"model_class":"DataToolParameter",
"hidden":false,
"refresh_on_change":true,
"type":"data",
"options":{
"hdca":[
],
"hda":[
]
},
"name":"InFile"
},
{
"help":"Size of ngrams",
"min":"None",
"datalist":[
],
"max":"None",
"area":false,
"argument":"--FragSize",
"value":"4",
"label":"Size of ngrams",
"is_dynamic":false,
"optional":false,
"model_class":"IntegerToolParameter",
"hidden":false,
"refresh_on_change":false,
"type":"integer",
"name":"d"
}
]
}
],
"type":"conditional",
"name":"SelPlotting"
}
]
如果我们使用 python 代码探索具有不同对象的数据列表：
for a in data:
for i in a['cases']:
print (i['inputs'])
它显示了多个案例，并根据所选的选项/选择，它有一组输入。
例如，此工具有四个绘图。默认选项是热图，当基于此选择选择热图时，它是“案例 1”，它具有一组特定的输入参数。
在第二个条件中，选项“散点图”有自己的一组输入，在这个输入中，还有另外两种情况 2D 或 3D 散点图。这两个嵌套案例也有其独特的参数，应根据所选的选择填充到表单上。
我想创建一个基于 Javascript 的模板，该模板可以将此 API 数据作为输入，并可以基于此架构创建 GUI/表单。
如何解决这个问题呢。
谢谢
解决方案
推荐阅读
- python - 如何在 pycharm venv 中安装软件包？
- c# - 如何在 C# 中循环切换函数
- android - 如何用另一个片段替换 nav_host_fragment 中的片段
- html - 在 HTML 中调整图像大小并保持 CSS 绝对正确
- reactjs - 为什么子 Styled-components 不应用样式？
- c++ - C++中的函数定义
- android-studio - 我想使用我在下面制作的导航栏更改我的颤振应用程序的屏幕
- c - GTK Hello World 抱怨未定义的引用
- angular - 将按钮动态添加到垫表角材料
- javascript - 如何使用 javascript 或 lodash 用新对象替换对象？