首页 > 解决方案 > 我将如何仅使用 json 构建整个表单?

问题描述

我得到了一个小测验,以仅使用 javascript 的 json 文件在 html 中构建一个表单。仅使用js就可以吗?谁能给我一个链接或在谷歌上参考的东西来完成这项任务?我已经搜索了“json 文件到 html”,但到目前为止还没有找到任何可以帮助的东西。json 文件包含一个可以按数量订购的项目菜单,因此我还需要在其中包含表单元素,这样您就可以看到它并不容易搜索。任何提示或指示都会很棒。我已附上 json 表单,以便您更好地理解任务。

{
    "menu": {
        "slice of pizza": "2.00",
        "toppings": {
            "pepperoni": ".25",
            "meatballs": ".35",
            "mushrooms": ".40",
            "olives": ".20"
        },
        "sides": {
            "potato salad": "1.25",
            "hummus": "2.50",
            "caesar salad": "3.50",
            "garden salad": "2.25"
        },
        "drinks": {
            "soda": {
                "small": "1.95",
                "medium": "2.20",
                "large": "2.50"
            },
            "juice": "2.00",
            "water": "1.25"
        }
    }
}

标签: javascripthtmlcss

解决方案


纠正我,你会实现这样的目标吗?

<h1>SLice of pizza: 2.00</h1>
<label>toping</label>
<select>
<option>peperoni .25</option>
...
<option>olive .20</option>
</select>

如果你这样做,那么你需要做的就是遍历 json 如果有多个值,那么你生成选择标签,然后将它附加到你的 html

我仍然没有发布任何代码,恐怕我把你的问题弄错了


推荐阅读